<template>
  <div>
    <div style="display: inline-block;">
      <div style="position: relative;display: inline-block; margin: 5px;">
        <span>状态：</span>
        <el-select
          v-model="status"
          style="width:150px;margin-left: 10px;"
          @change="select()"
        >
          <el-option
            v-for="item in statesnum"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option> </el-select
        >&nbsp;&nbsp;
      </div>
      <div style="position: relative;display: inline-block; margin: 5px;">
        <span>店铺类型：</span>
        <el-select
          v-model="shopType"
          style="width:150px;margin-left: 10px;"
          @change="select()"
        >
          <el-option
            v-for="item in shopTypenum"
            :key="item.id"
            :label="item.shopTypeName"
            :value="item.id"
          >
          </el-option> </el-select
        >&nbsp;&nbsp;
      </div>
      <div style="position: relative;display: inline-block; margin: 5px;">
        <span>店铺名称：</span>
        <el-input
          style="width: 200px;"
          @keydown.enter.native="select"
          placeholder="请输入店铺名称"
          v-model="userName"
        >
        </el-input
        >&nbsp;&nbsp;
      </div>
      <el-button
        style="margin-left:15px;"
        size="mini"
        type="primary"
        icon="document"
        @click="select"
        >查询</el-button
      >
      <el-button
        style="margin-left:15px;"
        size="mini"
        type="primary"
        icon="document"
        @click="cleans"
        >重置</el-button
      >
      <!-- <el-button style='margin:0 0 20px 20px;' v-if="isAuth('shopAutonym:pass')" size="mini" type="primary" icon="document"
        @click="passClick()" :disabled="checkBoxData.length <= 0">通过</el-button> -->
    </div>
    <el-table v-loading="tableDataLoading" :data="tableData.list">
      <!-- <el-table-column type="selection" fixed>
      </el-table-column> @selection-change="changeFun" -->
      <el-table-column prop="shopId" label="编号"> </el-table-column>
      <el-table-column prop="shopName" label="店铺名称" width="200">
      </el-table-column>
      <el-table-column prop="shopTypeName" label="店铺类型" width="200">
      </el-table-column>
      <el-table-column prop="shopCover" label="商铺LOGO" width="150">
        <template slot-scope="scope">
          <div v-if="scope.row.shopCover == null || scope.row.shopCover == ''">
            暂无图片
          </div>
          <div
            v-else-if="scope.row.shopCover.includes(',')"
            style="display:flex;flex-wrap: wrap;"
          >
            <div
              v-for="item in scope.row.shopCover.split(',')"
              style="margin: 2px;"
            >
              <!-- <el-popover placement="top-start" title="" trigger="hover"> -->
              <img
                style="width: 50px; height: 50px"
                :src="item"
                alt=""
                slot="reference"
                v-viewer
              />
              <!-- <img style="width: 200px; height: 200px" :src="item" alt="">
              </el-popover> -->
            </div>
          </div>
          <div v-else>
            <!-- <el-popover placement="top-start" title="" trigger="hover"> -->
            <img
              style="width: 50px; height: 50px"
              :src="scope.row.shopCover"
              alt=""
              slot="reference"
              v-viewer
            />
            <!-- <img style="width: 200px; height: 200px" :src="scope.row.shopCover" alt="">
            </el-popover> -->
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="identitycardNumber" label="身份证号" width="200">
      </el-table-column>
      <el-table-column prop="identitycardPro" label="身份证正面图" width="150">
        <template slot-scope="scope">
          <div
            v-if="
              scope.row.identitycardPro == null ||
                scope.row.identitycardPro == ''
            "
          >
            暂无图片
          </div>
          <div
            v-else-if="scope.row.identitycardPro.includes(',')"
            style="display:flex;flex-wrap: wrap;"
          >
            <div
              v-for="item in scope.row.identitycardPro.split(',')"
              style="margin: 2px;"
            >
              <!-- <el-popover placement="top-start" title="" trigger="hover"> -->
              <img
                style="width: 50px; height: 50px"
                :src="item"
                alt=""
                slot="reference"
                v-viewer
              />
              <!-- <img style="width: 90%; height: 90%" :src="item" alt="">
              </el-popover> -->
            </div>
          </div>
          <div v-else>
            <!-- <el-popover placement="top-start" title="" trigger="hover"> -->
            <img
              style="width: 50px; height: 50px"
              :src="scope.row.identitycardPro"
              alt=""
              slot="reference"
              v-viewer
            />
            <!-- <img style="width: 90%; height: 90%" :src="scope.row.identitycardPro" alt="">
            </el-popover> -->
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="identitycardCon" label="身份证反面图" width="150">
        <template slot-scope="scope">
          <div
            v-if="
              scope.row.identitycardCon == null ||
                scope.row.identitycardCon == ''
            "
          >
            暂无图片
          </div>
          <div
            v-else-if="scope.row.identitycardCon.includes(',')"
            style="display:flex;flex-wrap: wrap;"
          >
            <div
              v-for="item in scope.row.identitycardCon.split(',')"
              style="margin: 2px;"
            >
              <!-- <el-popover placement="top-start" title="" trigger="hover"> -->
              <img
                style="width: 50px; height: 50px"
                :src="item"
                alt=""
                slot="reference"
                v-viewer
              />
              <!-- <img style="width: 90%; height: 90%" :src="item" alt="">
              </el-popover> -->
            </div>
          </div>
          <div v-else>
            <!-- <el-popover placement="top-start" title="" trigger="hover"> -->
            <img
              style="width: 50px; height: 50px"
              :src="scope.row.identitycardCon"
              alt=""
              slot="reference"
              v-viewer
            />
            <!-- <img style="width: 90%; height: 90%" :src="scope.row.identitycardCon" alt="">
            </el-popover> -->
          </div>
        </template>
      </el-table-column>
      <el-table-column
        prop="businessLicense"
        label="营业执照和健康证"
        width="150"
      >
        <template slot-scope="scope">
          <div
            v-if="
              scope.row.businessLicense == null ||
                scope.row.businessLicense == ''
            "
          >
            暂无图片
          </div>
          <div
            v-else-if="scope.row.businessLicense.includes(',')"
            style="display:flex;flex-wrap: wrap;"
          >
            <div
              v-for="item in scope.row.businessLicense.split(',')"
              style="margin: 2px;"
            >
              <!-- <el-popover placement="top-start" title="" trigger="hover"> -->
              <img
                style="width: 50px; height: 50px"
                :src="item"
                alt=""
                slot="reference"
                v-viewer
              />
              <!-- <img style="width: 100%; height: 100%" :src="item" alt="">
              </el-popover> -->
            </div>
          </div>
          <div v-else>
            <!-- <el-popover placement="top-start" title="" trigger="hover"> -->
            <img
              style="width: 50px; height: 50px"
              :src="scope.row.businessLicense"
              alt=""
              slot="reference"
              v-viewer
            />
            <!-- <img style="width: 100%; height: 100%" :src="scope.row.businessLicense" alt="">
            </el-popover> -->
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="realName" label="真实姓名" width="200">
        <template slot-scope="scope">
          <span
            style="color: #4f9dec;cursor: pointer;"
            @click="updates(scope.row)"
            >{{ scope.row.realName ? scope.row.realName : "未绑定" }}</span
          >
        </template>
      </el-table-column>
      <el-table-column prop="phone" label="手机号" width="150">
      </el-table-column>
      <el-table-column prop="detailedAddress" label="商户地址" width="160">
      </el-table-column>
      <el-table-column prop="province" label="省" width="160">
      </el-table-column>
      <el-table-column prop="city" label="市" width="160"> </el-table-column>
      <el-table-column prop="district" label="区" width="160">
      </el-table-column>
      <el-table-column prop="shopLng" label="经度" width="160">
      </el-table-column>
      <el-table-column prop="shopLat" label="纬度" width="160">
      </el-table-column>
      <el-table-column prop="cashDeposit" label="保证金" width="160">
      </el-table-column>
      <el-table-column prop="auditReason" label="审核内容" width="160">
      </el-table-column>
      <el-table-column prop="createTime" label="提交时间" width="160">
      </el-table-column>
      <el-table-column prop="auditTime" label="审核时间" width="160">
      </el-table-column>
      <el-table-column fixed="right" prop="status" label="状态" width="160">
        <template slot-scope="scope">
          <span v-if="scope.row.status == 0">待审核</span>
          <span style="color: #008200;" v-if="scope.row.status == 1"
            >审核成功</span
          >
          <span style="color: crimson;" v-if="scope.row.status == 2"
            >已拒绝</span
          >
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="180">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="primary"
            :disabled="!isAuth('shopAutonym:refuse') || scope.row.status !== 0"
            @click="refuseClick(scope.row)"
            >拒绝
          </el-button>
          <el-button
            size="mini"
            type="primary"
            :disabled="!isAuth('shopAutonym:pass') || scope.row.status !== 0"
            @click="passClicks(scope.row)"
            >通过
          </el-button>
          <el-button
            v-if="scope.row.status == 1"
            size="mini"
            type="primary"
            :disabled="!isAuth('shopAutonym:pass')"
            style="margin-top: 10px;"
            @click="bianjiClicks(scope.$index, scope.row)"
            >编辑
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <div style="text-align: center;margin-top: 10px;">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="limit"
        :current-page="page"
        layout="total,sizes, prev, pager, next"
        :total="tableData.totalCount"
      >
      </el-pagination>
    </div>
    <!-- 修改提交的审核 -->
    <el-dialog title="修改" :visible.sync="dialogFormVisible1" center>
      <el-form :model="form">
        <el-form-item label="商铺LOGO：" :label-width="formLabelWidth">
          <div
            style=" width:148px;height:148px;border: 1px dashed #c0ccda;border-radius: 6px;text-align: center;line-height: 148px;"
          >
            <el-upload
              class="avatar-uploader"
              v-model="form.shopCover"
              :action="Tupiantou"
              :show-file-list="false"
              :on-success="handleAvatarSuccess2"
              :before-upload="beforeAvatarUpload"
            >
              <img
                v-if="form.shopCover"
                :src="form.shopCover"
                class="avatar"
                style="border-radius: 6px;width: 148px;height: 148px;"
              />
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </div>
        </el-form-item>
        <el-form-item label="真实姓名：" :label-width="formLabelWidth">
          <el-input v-model="form.realName" style="width:65%;"></el-input>
        </el-form-item>
        <el-form-item label="手机号：" :label-width="formLabelWidth">
          <el-input v-model="form.phone" style="width:65%;"></el-input>
        </el-form-item>
        <el-form-item label="身份证号：" :label-width="formLabelWidth">
          <el-input
            v-model="form.identityCardNumber"
            style="width:65%;"
          ></el-input>
        </el-form-item>
        <el-form-item label="身份证正面照片：" :label-width="formLabelWidth">
          <div
            style=" width:148px;height:148px;border: 1px dashed #c0ccda;border-radius: 6px;text-align: center;line-height: 148px;"
          >
            <el-upload
              class="avatar-uploader"
              v-model="form.identityCardPro"
              :action="Tupiantou"
              :show-file-list="false"
              :on-success="handleAvatarSuccessZ"
              :before-upload="beforeAvatarUpload"
            >
              <img
                v-if="form.identityCardPro"
                :src="form.identityCardPro"
                class="avatar"
                style="border-radius: 6px;width: 148px;height: 148px;"
              />
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </div>
        </el-form-item>
        <el-form-item label="身份证反面照片：" :label-width="formLabelWidth">
          <div
            style=" width:148px;height:148px;border: 1px dashed #c0ccda;border-radius: 6px;text-align: center;line-height: 148px;"
          >
            <el-upload
              class="avatar-uploader"
              v-model="form.identityCardCon"
              :action="Tupiantou"
              :show-file-list="false"
              :on-success="handleAvatarSuccessF"
              :before-upload="beforeAvatarUpload"
            >
              <img
                v-if="form.identityCardCon"
                :src="form.identityCardCon"
                class="avatar"
                style="border-radius: 6px;width: 148px;height: 148px;"
              />
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </div>
        </el-form-item>
        <el-form-item label="营业执照和健康证：" :label-width="formLabelWidth">
          <div
            class="imgs"
            v-for="(item, index) in businessLicense"
            :key="index"
          >
            <img width="60%" class="images" height="60%" :src="item" alt="" />
            <span class="dels">
              <i class="el-icon-delete" @click="clear(index)"></i>
            </span>
          </div>
          <div class="imgs" style="width: 50%;">
            <el-upload
              :action="Tupiantou"
              list-type="picture-card"
              :show-file-list="false"
              :on-success="handleUploadSuccess"
              :on-change="handleChange"
              :on-remove="handleRemove"
            >
              <!-- <el-progress
              v-if="percentage1 > 0 && percentage1 < 100"
              type="circle"
              :percentage="percentage1"
            >
            </el-progress>
            <i v-else class="el-icon-plus"></i> -->
            </el-upload>
            <!-- <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="" />
          </el-dialog> -->
          </div>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible1 = false">取 消</el-button>
        <el-button type="primary" @click="amendNoticeTo()">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 任务拒绝弹框 -->
    <el-dialog title="任务拒绝" :visible.sync="dialogFormVisible" center>
      <div style="margin-bottom: 10px;">
        <span
          style="width: 200px;display: inline-block;text-align: right;position: relative;top: -70px;"
          >拒绝理由：</span
        >
        <el-input
          style="width:50%;"
          v-model="content"
          type="textarea"
          :rows="4"
          placeholder="请输入拒绝理由"
        ></el-input>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="refuseto()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      limit: 10,
      page: 1,
      content: "",
      status: "",
      statesnum: [
        {
          value: "",
          label: "全部"
        },
        {
          value: 0,
          label: "待审核"
        },
        {
          value: 1,
          label: "审核成功"
        },
        {
          value: 2,
          label: "拒绝"
        }
      ],
      shopType: "",
      shopTypenum: [],
      userName: "",
      activeName: "first",
      tableDataLoading: false,
      dialogFormVisible: false,
      dialogFormVisible1: false,
      tableData: {},
      checkBoxData: [], //多选框选择的值

      formLabelWidth: "200px",
      businessLicense: "",
      form: {
        businessLicense: "",
        identityCardCon: "",
        identityCardNumber: "",
        identityCardPro: "",
        phone: "",
        realName: "",
        shopCover: ""
      },
      shopId: "",
      dialogVisible: false
    };
  },
  methods: {
    // 多选
    changeFun(val) {
      this.checkBoxData = val;
    },
    // 详情跳转
    updates(row) {
      this.$router.push({
        path: "/userDetail",
        query: {
          userId: row.userId
        }
      });
    },
    handleSizeChange(val) {
      this.limit = val;
      this.dataSelect();
    },
    handleCurrentChange(val) {
      this.page = val;
      this.dataSelect();
    },
    //任务通过
    passClick(id) {
      this.status = 1;
      this.content = "同意";
      var ids = id
        ? [id]
        : this.checkBoxData.map(item => {
            return item.id;
          });
      this.$http({
        url: this.$http.adornUrl(
          `student/auditStudentAuthentication/${ids}/${this.status}/${this.content}`
        ),
        method: "post",
        data: this.$http.adornData({})
      }).then(({ data }) => {
        if (data.code == 0) {
          this.$message({
            message: "操作成功",
            type: "success",
            duration: 1500,
            onClose: () => {
              this.content = "";
              this.status = "";
              this.dataSelect();
            }
          });
        } else {
          this.$message({
            message: data.msg,
            type: "error",
            duration: 1500,
            onClose: () => {
              this.content = "";
              this.status = "";
              this.dataSelect();
            }
          });
        }
      });
    },
    beforeAvatarUpload(file) {
      return this.$processImage(this, file, false);
    },
    handleAvatarSuccess2(file, fileList) {
      this.form.shopCover = file.data;
    },
    handleAvatarSuccessZ(file, fileList) {
      this.form.identityCardPro = file.data;
    },
    handleAvatarSuccessF(file, fileList) {
      this.form.identityCardCon = file.data;
    },
    handleChange(file, fileList) {
      // this.hideUpload = fileList.length >= this.limit;
    },
    handleRemove(file, fileList) {
      // this.hideUpload = fileList.length >= this.limit;
      for (var i in this.businessLicense) {
        if (this.businessLicense[i] == file.response.data) {
          this.businessLicense.splice(i, 1);
        }
      }
    },
    //上传成功
    handleUploadSuccess(file, fileList) {
      // console.log('file.data:', file.data, 'this.goodsPicture', this.goodsPicture)
      // this.potost += file.data + ','
      this.businessLicense.push(file.data);
    },
    // 删除
    clear(index) {
      this.businessLicense.splice(index, 1);
    },
    //编辑任务
    bianjiClicks(index, rows) {
      console.log(rows);

      // console.log(rows.businessLicense.split(','),'k',rows)
      this.dialogFormVisible1 = true;
      this.businessLicense = rows.businessLicense.split(",");
      this.form.identityCardCon = rows.identitycardCon;
      this.form.identityCardNumber = rows.identitycardNumber;
      this.form.identityCardPro = rows.identitycardPro;
      this.form.phone = rows.phone;
      this.form.realName = rows.realName;
      this.form.shopCover = rows.shopCover;
      this.shopId = rows.shopId;
    },
    //确定修改
    amendNoticeTo() {
      if (this.businessLicense.length < 2) {
        this.$notify({
          title: "提示",
          duration: 1800,
          message: "营业执照和健康证缺一不可",
          type: "warning"
        });
        return;
      }
      var yingye = this.businessLicense.toString();
      // console.log(yingye,'执照')
      if (this.form.identityCardCon == "") {
        this.$notify({
          title: "提示",
          duration: 1800,
          message: "身份证反面照片不能为空",
          type: "warning"
        });
        return;
      }
      if (this.form.identityCardNumber == "") {
        this.$notify({
          title: "提示",
          duration: 1800,
          message: "身份证号不能为空",
          type: "warning"
        });
        return;
      }
      if (this.form.identityCardPro == "") {
        this.$notify({
          title: "提示",
          duration: 1800,
          message: "身份证正面照片不能为空",
          type: "warning"
        });
        return;
      }
      if (this.form.phone == "") {
        this.$notify({
          title: "提示",
          duration: 1800,
          message: "手机号不能为空",
          type: "warning"
        });
        return;
      }
      if (this.form.realName == "") {
        this.$notify({
          title: "提示",
          duration: 1800,
          message: "真实姓名不能为空",
          type: "warning"
        });
        return;
      }
      if (this.form.shopCover == "") {
        this.$notify({
          title: "提示",
          duration: 1800,
          message: "商铺logo不能为空",
          type: "warning"
        });
        return;
      }
      this.$http({
        url: this.$http.adornUrl(`admin/shop/${this.shopId}`),
        method: "put",
        data: this.$http.adornData({
          businessLicense: yingye,
          identityCardCon: this.form.identityCardCon,
          identityCardNumber: this.form.identityCardNumber,
          identityCardPro: this.form.identityCardPro,
          phone: this.form.phone,
          realName: this.form.realName,
          shopCover: this.form.shopCover
        })
      }).then(({ data }) => {
        if (data.code == 0) {
          this.dialogFormVisible1 = false;
          this.$message({
            message: "操作成功",
            type: "success",
            duration: 1500,
            onClose: () => {}
          });
          this.dataSelect();
          this.dataSelect1();
        } else {
          this.$message({
            message: data.msg,
            type: "warning",
            duration: 1500,
            onClose: () => {}
          });
        }
      });
    },
    //单条任务通过
    passClicks(row) {
      this.status = 1;
      this.content = "通过";
      this.$http({
        url: this.$http.adornUrl(`admin/shop/audit-shop/${row.shopId}`),
        method: "put",
        params: this.$http.adornParams({
          // 'shopId': row.shopId,
          auditReason: this.content,
          auditStatus: this.status,
          shopRate: 1
        })
      }).then(({ data }) => {
        if (data.code == 0) {
          this.$message({
            message: "操作成功",
            type: "success",
            duration: 1500,
            onClose: () => {
              this.content = "";
              this.status = "";
              this.dataSelect();
            }
          });
        } else {
          this.$message({
            message: data.msg,
            type: "error",
            duration: 1500,
            onClose: () => {
              this.content = "";
              this.status = "";
              this.dataSelect();
            }
          });
        }
      });
    },
    //任务拒绝
    refuseClick(rows) {
      this.status = 2;
      this.helpTakeId = rows.shopId;
      this.content = "";
      this.dialogFormVisible = true;
    },
    refuseto() {
      if (this.content == "") {
        this.$notify({
          title: "提示",
          duration: 1800,
          message: "请输入拒绝理由",
          type: "warning"
        });
        return;
      }
      this.$http({
        url: this.$http.adornUrl(`admin/shop/audit-shop/${this.helpTakeId}`),
        method: "put",
        params: this.$http.adornParams({
          // 'shopId': this.helpTakeId,
          auditReason: this.content,
          auditStatus: this.status,
          shopRate: 0
        })
      }).then(({ data }) => {
        this.dialogFormVisible = false;
        this.$message({
          message: "操作成功",
          type: "success",
          duration: 1500,
          onClose: () => {
            this.content = "";
            this.status = "";
            this.dataSelect();
          }
        });
      });
    },
    // 查询
    select() {
      this.page = 1;
      this.limit = 10;
      this.dataSelect();
    },
    // 重置
    cleans() {
      this.status = "";
      this.userName = "";
      this.shopType = "";
      this.dataSelect();
    },
    // 获取派单数据列表
    dataSelect() {
      this.tableDataLoading = true;
      this.$http({
        url: this.$http.adornUrl("admin/shop/selectShopList"),
        method: "get",
        params: this.$http.adornParams({
          page: this.page,
          limit: this.limit,
          status: this.status,
          shopName: this.userName,
          shopType: this.shopType
        })
      }).then(({ data }) => {
        this.tableDataLoading = false;
        let returnData = data.data;
        this.tableData = returnData;
      });
    },
    // 获取分类数据
    dataSelect1() {
      this.tableDataLoading = true;
      this.$http({
        url: this.$http.adornUrl("admin/shoptype/selectShopTypeList"),
        method: "get",
        params: this.$http.adornParams({
          page: this.page,
          limit: this.limit
        })
      }).then(({ data }) => {
        this.tableDataLoading = false;
        let returnData = data.data;
        this.shopTypenum = returnData.list;
      });
    }
  },
  mounted() {
    this.dataSelect();
    this.dataSelect1();
  }
};
</script>

<style></style>
