<template>
  <div>
    <div class="search-wrapper">
      <el-form :inline="true" :model="searchForm" class="search_form" style="text-align: left">
        <el-form-item label="名称">
          <el-input v-model="searchForm.name" placeholder="请输入店铺名称" clearable></el-input>
        </el-form-item>
        <el-form-item label="电话">
          <el-input v-model="searchForm.phone" placeholder="请输入电话" clearable></el-input>
        </el-form-item>

        <el-form-item label="类型">
          <el-cascader :options="menuOptions" clearable filterable placeholder="请选择类型"
            @change="menuChange"></el-cascader>
        </el-form-item>
        <el-form-item label="入驻类型">
          <el-select v-model="searchForm.type" clearable placeholder="请选择入驻类型" size="medium" @change="onSubmit">
            <el-option label="全部" value=""> </el-option>
            <el-option label="商家入驻" value="0"> </el-option>
            <el-option label="上报地点" value="1"> </el-option>
            <el-option label="上报网红墙" value="2"> </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
        <br />
        <el-form-item label="状态" style="margin-top: 10px">
          <el-radio-group v-model="searchForm.state" @change="onSubmit">
            <el-radio label="">全部</el-radio>

            <el-radio :label="0">未审核</el-radio>
            <el-radio :label="1">通过</el-radio>
            <el-radio :label="4">拒绝</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
    </div>
    <!-- <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane
        :label="`我的待办 ( ${taskData.myTask} )`"
        name="1"
      ></el-tab-pane>
      <el-tab-pane
        :label="`我的已办 ( ${taskData.finishedTask} )`"
        name="2"
      ></el-tab-pane>
      <el-tab-pane
        :label="`所有任务 ( ${taskData.allTask} )`"
        name="3"
      ></el-tab-pane>
    </el-tabs> -->

    <div class="table-wrapper">
      <table-template :tableData="tableData" :tableColumns="tableColumns" :loading="loading" :pagination="pagination"
        @Jump="jumpPage">
        <el-table-column slot="type" label="入驻类型" align="center" width="120px">
          <template slot-scope="scope">
            <el-tag v-if="
              scope.row.type == 0 ||
              scope.row.type == 1 ||
              scope.row.type == 2
            " :type="scope.row.type == 1
              ? 'success'
              : scope.row.type == 2
                ? 'warning'
                : ''
              ">{{
                scope.row.type == 0
                  ? "商家入驻"
                  : scope.row.type == 1
                    ? "上报地点"
                    : scope.row.type == 2
                      ? "上报网红墙"
                      : ""
              }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column slot="categoryName" label="类型" align="center" width="120px">
          <template slot-scope="scope">
            {{ scope.row.categoryName }}
          </template>
        </el-table-column>
        <el-table-column slot="state" label="审核状态" align="center" width="120px">
          <template slot-scope="scope">
            <el-tag v-if="
              scope.row.state == 0 ||
              scope.row.state == 1 ||
              scope.row.state == 4
            " :type="scope.row.state == 4
              ? 'danger'
              : scope.row.state == 1
                ? 'success'
                : ''
              ">{{ scope.row.stateName }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column slot="delFlag" label="启用状态" align="center" width="120px">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.delFlag == 0 || scope.row.delFlag == 1" :type="scope.row.delFlag == 1
              ? 'danger'
              : scope.row.delFlag == 0
                ? 'success'
                : ''
              ">{{ scope.row.flagName }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column slot="icon" label="照片" align="center">
          <template slot-scope="scope">
            <el-image v-if="scope.row.pictureList" style="width: 30px; height: 30px"
              :src="scope.row.pictureList && scope.row.pictureList[0].url" :preview-src-list="scope.row.previewSrcList">
            </el-image>
            <div v-else>暂无图片</div>
          </template>
        </el-table-column>

        <el-table-column fixed="right" label="操作" width="350" align="center">
          <template slot-scope="scope">
            <el-button type="primary" size="mini" round @click="view(scope.row)">查看</el-button>
            <el-button type="success" size="mini" round @click="edit(scope.row)">编辑</el-button>
            <el-button @click="delFlagHandle(scope.row)" :type="scope.row.delFlag == 0 ? 'warning' : 'success'"
              size="mini" round slot="reference">{{ scope.row.delFlag == 0 ? "禁用" : "启用" }}
            </el-button>
            <!-- <el-button type="danger" size="mini" round @click="del(scope.row)"
              >删除</el-button
            > -->
          </template>
        </el-table-column>
      </table-template>
    </div>
    <el-dialog :title="type == 'view' ? '详情' : '编辑'" :visible.sync="dialogVisible" width="40%" destroy-on-close>
      <el-form :model="detail" :rules="rules" ref="ruleForm" label-width="120px" class="demo-ruleForm formData">
        <el-form-item label="名称" prop="name">
          <el-input v-model="detail.name" clearable placeholder="请输入名称" :disabled="type == 'view'"></el-input>
        </el-form-item>
        <el-form-item label="入驻类型" prop="type">
          <el-radio-group v-model="detail.type" disabled>
            <el-radio :label="0">商家入驻</el-radio>
            <el-radio :label="1">上报地点</el-radio>
            <el-radio :label="2">上报网红墙</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="类型" prop="categoryIdList">
          <el-cascader :disabled="type == 'view'" style="width: 100%" :props="props" :options="menuOptions" clearable
            filterable v-model="detail.categoryIdList" @change="categoryChange" placeholder="请选择类型"></el-cascader>
        </el-form-item>
        <el-form-item label="经营范围和内容" prop="otherInfo" v-if="detail.otherInfo">
          <el-input v-model="detail.otherInfo" clearable placeholder="请输入经营范围和内容" :disabled="type == 'view'"></el-input>
        </el-form-item>
        <el-form-item label="详细地址" prop="address">
          <el-input v-model="detail.address" clearable placeholder="请输入详细地址" :disabled="type == 'view'"></el-input>
        </el-form-item>
        <el-form-item label="区" prop="district">
          <el-input v-model="detail.district" placeholder="请输入区" clearable disabled></el-input>
        </el-form-item>
        <el-form-item label="电话" prop="phone">
          <el-input v-model="detail.phone" placeholder="请输入电话" clearable :disabled="type == 'view'"></el-input>
        </el-form-item>
        <el-form-item label="营业时间" prop="businessHours">
          <el-input v-model="detail.businessHours" clearable placeholder="例如：周一至周五 9:00-23:00"
            :disabled="type == 'view'"></el-input>
        </el-form-item>
        <el-form-item label="创建时间" prop="createTime">
          <el-input v-model="detail.createTime" clearable disabled></el-input>
        </el-form-item>
        <el-form-item label="启用状态" prop="delFlag">
          <el-radio-group v-model="detail.delFlag" disabled>
            <el-radio :label="1">禁用</el-radio>
            <el-radio :label="0">启用</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="审核状态" prop="state">
          <el-tag v-if="detail.state == 0 || detail.state == 1 || detail.state == 4" :type="detail.state == 4 ? 'danger' : detail.state == 1 ? 'success' : ''
            ">{{
              detail.state == 4
                ? "审核拒绝"
                : detail.state == 1
                  ? "审核通过"
                  : "未审核"
            }}</el-tag>
        </el-form-item>

        <el-form-item label="门面照片">
          <file-upload :data.sync="shopImg" :limit="1" :disable="type == 'view'"></file-upload>
        </el-form-item>

        <el-form-item label="左右店铺">
          <file-upload :data.sync="besideImg" :limit="2" :disable="type == 'view'"></file-upload>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer" v-if="type == 'view'">
        <el-button type="success" round slot="reference" v-if="detail.state == 0" :disabled="detail.state != 0"
          @click="reviewHandle('pass', detail)">通过
        </el-button>

        <el-button type="danger" round slot="reference" v-if="detail.state == 0" :disabled="detail.state != 0"
          @click="reviewHandle('refuse', detail)">拒绝
        </el-button>

        <!-- <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false"
          >确 定</el-button
        > -->
      </span>
      <span slot="footer" class="dialog-footer" v-else>
        <el-button type="primary" round @click="dialogVisible = false">取 消</el-button>
        <el-button type="success" round @click="editConfirm">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog :visible.sync="visible">
      <img width="100%" :src="dialogImageUrl" alt="" />
    </el-dialog>
  </div>
</template>

<script>
import tableTemplate from "@/components/Table";
import FileUpload from "@/components/FileUpload.vue";
import {
  applyList,
  applyReview,
  applyDetail,
  shopEnable,
  shopMenu,
  editShop,
} from "@/api/livingCircle";
export default {
  name: "enter",
  components: { tableTemplate, FileUpload },
  data() {
    return {
      props: { multiple: true },

      dialogVisible: false,
      detail: {},
      searchForm: {
        name: "",
        state: "",
        type: "",
        phone: "",
        categoryId: "",
      },
      menuOptions: [],
      visible: false,
      dialogImageUrl: "",
      loading: false,
      tableData: [],
      tableColumns: [
        {
          key: "name",
          label: "名称",
          width: 180,
        },
        {
          key: "type",
          label: "入驻类型",
          type: "slot",
        },
        {
          key: "categoryName",
          label: "类型",
          width: 120,
          type: "slot",

        },
        {
          key: "district",
          label: "区",
        },
        {
          key: "address",
          label: "详细地址",
          width: 220,
        },
        {
          key: "icon",
          label: "照片",
          type: "slot",
        },
        {
          key: "phone",
          label: "联系电话",
          width: 150,
        },
        {
          key: "businessHours",
          label: "营业时间",
          width: 150,
        },

        {
          key: "state",
          label: "审核状态",
          type: "slot",
        },
        {
          key: "delFlag",
          label: "启用状态",
          type: "slot",
        },
        {
          key: "userName",
          label: "创建人",
          width: 120,
        },
        {
          key: "createTime",
          label: "创建时间",
          width: 170,
        },
      ],
      pagination: {
        total: 0,
        pageSize: 10,
        currentPage: 1,
      },
      rules: {
        name: [{ required: true, message: "请输入名称", trigger: "blur" }],
        address: [
          { required: true, message: "请输入详细地址", trigger: "blur" },
        ],
        categoryIdList: [
          { required: true, message: "请选择类型", trigger: "blur" },
        ],
      },
      userName: "",
      typeList: [],
      type: "view",
      categoryName: "",
      shopImg: [],
      besideImg: [],
    };
  },
  mounted() {
    this.userName = localStorage.getItem("userName");

    this.init();
    this.getShopMenu();
  },
  computed: {
    fileType() {
      return ["jpeg", "png", "jpg"];
    },
  },
  methods: {
    editConfirm() {
      let arr = [];
      let arr1 = [];
      this.shopImg.forEach((item) => {
        arr.push({
          url: item.url,
          urlType: 0,
        });
      });

      this.besideImg.forEach((item) => {
        arr1.push({
          url: item.url,
          urlType: 1,
        });
      });

      let params = {
        address: this.detail.address,
        businessHours: this.detail.businessHours,
        categoryIdList: this.detail.categoryIdList.map(item => item[1]),
        // category: this.detail.categoryIdList.map(item => item.categoryName).join('/'),
        name: this.detail.name,
        phone: this.detail.phone,
        pictureList: [...arr, ...arr1],
        id: this.detail.id,
      };

      editShop(params).then((res) => {
        if (res.code == 200) {
          this.$message.success(res.msg || "编辑成功");
          this.dialogVisible = false;
          this.init();
        } else {
          this.$message.warning(res.msg || "编辑失败");
        }
      });
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.visible = true;
    },
    getShopMenu() {
      shopMenu().then((res) => {
        if (res.code == 200) {
          let arr = [];
          res.data.forEach((item) => {
            let obj = {
              value: item.id,
              label: item.name,
              children: [],
            };
            if (item.categoryDOList && item.categoryDOList.length > 0) {
              item.categoryDOList.forEach((it) => {
                obj.children.push({
                  value: it.id,
                  label: it.name,
                });
              });
            }
            arr.push(obj);
            this.menuOptions = arr;
          });
        } else {
          this.$message.warning(res.msg || "获取类型失败");
        }
      });
    },
    menuChange(val) {
      this.searchForm.categoryId = val[1];
      this.init();
      // console.log("menuChange--->", val, this.searchForm.categoryId);
    },
    categoryChange(val) {
      console.log(val);
    },
    init() {
      this.loading = true;
      applyList({
        name: this.searchForm.name,
        state: this.searchForm.state,
        type: this.searchForm.type,
        phone: this.searchForm.phone,
        pageNum: this.pagination.currentPage,
        pageSize: this.pagination.pageSize,
        categoryId: this.searchForm.categoryId,
      }).then((res) => {
        if (res.code == 200) {
          this.loading = false;

          this.tableData =
            res.data.list && res.data.list.length > 0
              ? res.data.list.map((item) => {
                return {
                  ...item,
                  categoryName: item.categoryList.map(item => {
                    return item.categoryName
                  }).join('/'),
                  stateName:
                    item.state == 0
                      ? "未审核"
                      : item.state == 1
                        ? "审核通过"
                        : item.state == 4
                          ? "审核拒绝"
                          : "",
                  flagName:
                    item.delFlag == 0
                      ? "启用"
                      : item.delFlag == 1
                        ? "禁用"
                        : "",
                  previewSrcList:
                    item.pictureList && item.pictureList.length > 0
                      ? item.pictureList.map((item) => {
                        return item.url;
                      })
                      : [],
                };
              })
              : [];
          // this.tableData = res.data.list;
          this.pagination.total = res.data.total;
        } else {
          this.$message.warning(res.msg || "查询列表失败");
          this.loading = false;
        }
      });
    },

    reviewHandle(type, row) {
      let params = {};
      if (type === "pass") {
        this.$prompt(`确定通过该申请吗?`, "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          inputPlaceholder: "请输入原因",
          inputType: "textarea",
        }).then(({ value }) => {
          if (!value) {
            this.$message.error("未输入原因");
            return;
          } else {
            params = {
              id: row.id,
              state: 1,
              user: this.userName,
              reason: value,
            };
            applyReview(params).then((res) => {
              if (res.code == 200) {
                this.$message.success("审核成功");
                this.init();
                this.dialogVisible = false;
              } else {
                this.$message.warning(res.msg || "审核失败");
              }
            });
          }
        });
      } else {
        this.$prompt(`确定拒绝该申请吗?`, "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          inputPlaceholder: "请输入原因",
          inputType: "textarea",
        }).then(({ value }) => {
          if (!value) {
            this.$message.error("未输入原因");
            return;
          } else {
            params = {
              id: row.id,
              state: 4,
              user: this.userName,
              reason: value,
            };
            applyReview(params).then((res) => {
              if (res.code == 200) {
                this.$message.success("审核成功");
                this.init();
                this.dialogVisible = false;
              } else {
                this.$message.warning(res.msg || "审核失败");
              }
            });
          }
        });
      }
      // applyReview(params).then((res) => {
      //   if (res.code == 200) {
      //     this.$message.success("审核成功");
      //     this.init();
      //   }
      // });
      // this.dialogVisible = false;
    },
    filterTree(val) {
      let arr = [];
      this.menuOptions.forEach((item) => {
        item.children.forEach((it) => {
          if (it.value == val) {
            this.categoryName = `${item.label}-${it.label}`;
            arr = [item.value, it.value];
            return;
          }
        });
      });
      return arr;
    },
    view(row) {
      this.type = "view";
      applyDetail(row.id).then((res) => {
        if (res.code == 200) {
          this.detail = res.data;
          this.detail.categoryIdList = res.data.categoryList.map(item => [item.menuId, item.categoryId])
          // this.detail.categoryIds = this.filterTree(res.data.categoryId);
          let arr = [];
          let arr1 = [];
          res.data.pictureList?.forEach((item) => {
            if (item.urlType == 0) {
              arr.push({
                url: item.url,
                urlType: item.urlType,
              });
            } else {
              arr1.push({
                url: item.url,
                urlType: item.urlType,
              });
            }
          });

          this.shopImg = arr;
          this.besideImg = arr1;
          this.dialogVisible = true;
        } else {
          this.$message.warning(res.msg || "获取详情失败");
        }
      });
    },
    edit(row) {
      this.type = "edit";
      applyDetail(row.id).then((res) => {
        if (res.code == 200) {
          this.detail = res.data;
          this.detail.categoryIdList = res.data.categoryList.map(item => [item.menuId, item.categoryId])

          // this.detail.categoryIds = this.filterTree(res.data.categoryId);
          let arr = [];
          let arr1 = [];
          res.data.pictureList?.forEach((item) => {
            if (item.urlType == 0) {
              arr.push({
                url: item.url,
                urlType: item.urlType,
              });
            } else {
              arr1.push({
                url: item.url,
                urlType: item.urlType,
              });
            }
          });

          this.shopImg = arr;
          this.besideImg = arr1;

          this.dialogVisible = true;
        } else {
          this.$message.warning(res.msg || "获取详情失败");
        }
      });
    },
    delFlagHandle(row) {
      shopEnable({
        id: row.id,
      }).then((res) => {
        if (res.code == 200) {
          this.$message.success("操作成功");
          this.init();
        } else {
          this.$message.warning(res.msg || "操作失败");
        }
      });
    },
    handleClick() {
      this.loading = true;
      this.init();
      this.loading = false;
    },
    jumpPage() {
      this.init();
    },
    onSubmit() {
      this.init();
    },
    previewSrcList(list) {
      this.$nextTick(() => {
        if (list && list.length > 0) {
          list.forEach((item) => {
            return item.url;
          });
        }
      });
    },
  },
};
</script>

<style lang="stylus" scoped>
@import '~@/stylus/common';
.btn{
    margin-right 10px
}
.cell {
  display: flex;
  align-items: center;
  padding: 10px;
  border-bottom: 1px solid #eee;

  .label {
    width: 150px;
    color: #999;
    text-align: left;

    span {
      color: red;
      font-size: 12px;
    }
  }

  .value {
    color: #000;
    text-align: left;
  }

  .value1 {
    color: red;
  }

  .value2 {
    color: green;
  }

  .info {
    .item {
      width: 100%;
      text-align: left;
      color: #000;
      margin-bottom: 10px;
    }

    .item:last-child {
      margin-bottom: 0;
    }
  }
}
.formData{
  height 600px
  overflow auto
}
</style>
<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
