<template>
  <div>
    <el-card>
      <el-form :inline="true" :model="filterQuery" class="query-form" size="mini" label-width="100px">
        <el-row>
          <el-form-item label="企业名称:">
            <el-input
              v-model="filterQuery.companyName"
              placeholder="企业名称"
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button-group>
              <el-button
                type="primary"
                icon="el-icon-refresh"
                @click="onReset"
              >重置</el-button>
              <el-button type="primary" icon="el-icon-search" @click="onSubmit"
              >查询
              </el-button
              >
            </el-button-group>
          </el-form-item>
        </el-row>
      </el-form>

      <el-table v-loading="loading" :data="list" style="width: 100%" border highlight-current-row>
        <el-table-column label="序号" type="index"></el-table-column>
        <el-table-column
          label="企业名称"
          prop="companyName"
        ></el-table-column>
        <el-table-column
          label="社会统一信用号"
          prop="creditNum"
        ></el-table-column>

        <el-table-column label="企业类型" prop="bussinessStatus">
          <template slot-scope="scope">
            <span>{{ bussinessFlag[scope.row.bussinessStatus] }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="法人名称"
          prop="legalPerson"
        >
        </el-table-column>
        <el-table-column
          label="法人身份证号"
          prop="legalIdCard"
        >
        </el-table-column>
        <el-table-column
          label="法人电话"
          prop="contactWay"
        >
        </el-table-column>

        <el-table-column
          label="详细地址"
          prop="registerAddress"
          :show-overflow-tooltip="true"
        >
        </el-table-column>
        <el-table-column
          label="注册时间"
          prop="registerTime"
          width="230"
        ></el-table-column>



        <!--<el-table-column label="角色" prop="role"></el-table-column>-->

        <!--<el-table-column label="操作" width="180" fixed="right">-->
        <!--  <template slot-scope="scope">-->
        <!--    <el-button-group>-->
        <!--      <el-button-->
        <!--        type="text"-->
        <!--        size="mini"-->
        <!--        style="margin-right: 20px"-->
        <!--        @click.native.stop="customerkDialog(scope.row)"-->
        <!--      >查看用户-->
        <!--      </el-button-->
        <!--      >-->

        <!--      <el-button-->
        <!--        type="text"-->
        <!--        size="mini"-->
        <!--        style="float: right"-->
        <!--        @click.native.stop="contractDialog(scope.row)"-->
        <!--      >查看联系人-->
        <!--      </el-button-->
        <!--      >-->
        <!--    </el-button-group>-->
        <!--  </template>-->
        <!--</el-table-column-->
        <!--&gt;-->
        <el-table-column label="操作" fixed="right">
          <template slot-scope="scope">
                    <el-button
                      type="text"
                      size="mini"
                      style="margin-right: 20px"
                      @click.native.stop="customerkDialog(scope.row)"
                    >查看用户
                    </el-button>
            <el-button
              type="text"
              size="small"
              @click.native.stop="checkDialog(scope.row)"
            >编辑
            </el-button
            >


          </template>
        </el-table-column>
      </el-table>
      <el-dialog title="企业信息编辑" :visible.sync="formVisible" width="60%">
        <el-form :model="formData" ref="dataForm" label-width="100px">
          <el-row >
            <el-col :span="11">
                <el-form-item label="企业名称:" prop="companyName" >
                  <el-input
                    v-model="formData.companyName"
                    style="width: 90%"
                    disabled
                    size="small"
                  ></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="11" >
              <el-form-item label="统一信用号:" prop="creditNum">
                <el-input
                  v-model="formData.creditNum"
                  style="width: 90%"
                  size="small"
                  disabled
                ></el-input>
              </el-form-item>
            </el-col>

          </el-row>
          <el-row >
            <el-col :span="11">
              <el-form-item label="企业类型:" prop="bussinessStatus" >
                <el-select
                  v-model="formData.bussinessStatus"
                  size="small"
                  disabled
                  style="width: 90%"
                >
                  <el-option label="生产企业" value="1"></el-option>
                  <el-option label="流通企业" value="2"></el-option>
                  <el-option label="医疗机构" value="3"></el-option>
                  <el-option label="监管机构" value="4"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="11" >
              <el-form-item label="法人名称:" prop="legalPerson">
                <el-input
                  v-model="formData.legalPerson"
                  style="width: 90%"
                  disabled
                  size="small"
                ></el-input>
              </el-form-item>
            </el-col>

          </el-row>
          <el-row >
            <el-col :span="11">
              <el-form-item label="法人身份证号:" prop="legalIdCard" >
                <el-input
                  v-model="formData.legalIdCard"
                  style="width: 90%"
                  disabled
                  size="small"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="11" >
              <el-form-item label="法人电话:" prop="contactWay">
                <el-input
                  v-model="formData.contactWay"
                  style="width: 90%"
                  disabled
                  size="small"
                ></el-input>
              </el-form-item>
            </el-col>

          </el-row>

          <el-row >
            <el-col :span="11">
              <el-form-item label="详细地址:" prop="registerAddress" >
                <el-input
                  v-model="formData.registerAddress"
                  style="width: 90%"
                  disabled
                  size="small"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="11" >
              <el-form-item label="注册时间:" prop="registerTime">
                <el-input
                  v-model="formData.registerTime"
                  style="width: 90%"
                  disabled
                  size="small"
                ></el-input>
              </el-form-item>
            </el-col>

          </el-row>


          <!--<el-form-item label="分配角色：">-->
          <!--  <el-radio-group v-model="check" @change="handleCheckedChange">-->
          <!--    <el-radio v-for="item in roles" :key="item.roleId" :label="item.roleId">{{-->
          <!--        item.roleName-->
          <!--      }}-->
          <!--    </el-radio>-->
          <!--  </el-radio-group>-->
          <!--</el-form-item>-->
        </el-form>
        <el-table
          v-loading="certLoading"
          :data="certList"
          style="width: 100%"
          border
          highlight-current-row
        >
          <el-table-column
            type="index"
            label="序号"
            width="50"
          ></el-table-column>
          <el-table-column label="证书名称" prop="name"></el-table-column>
          <el-table-column label="证书编号" prop="code"></el-table-column>
          <el-table-column label="有效期" prop="vailDate"></el-table-column>
          <el-table-column label="失效期" prop="expireDate"></el-table-column>
          <el-table-column label="确认状态" prop="checkStatus" width="120">
            <template slot-scope="scope">
              <el-tag :type="scope.row.checkStatus | statusFilterType">
                {{ checkFlag[scope.row.checkStatus] }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column
            label="确认说明"
            prop="checkComment"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column label="状态" prop="status" width="120">
            <template slot-scope="scope">
              <el-tag :type="scope.row.status | statusType">
                {{ statusFlag[scope.row.status] }}
              </el-tag>
            </template>
          </el-table-column>

          <el-table-column label="备注" prop="remark"></el-table-column>

          <el-table-column label="操作" width="180">
            <template slot-scope="scope">

              <el-button
                type="text"
                size="small"
                @click.native="showImgViewer(scope.row)"
              >预览</el-button
              >
            </template>
          </el-table-column>
        </el-table>

        <div slot="footer" class="dialog-footer">
          <el-button @click.native="cancelDialog" size="small">取消</el-button>
          <el-button type="primary" size="small" @click.native="formSubmit()"
          >提交
          </el-button
          >
        </div>
      </el-dialog>

      <el-dialog title="客户联系人" :visible.sync="contractVisible" width="60%">
        <el-form :model="contractData" ref="dataForm">
          <el-row :gutter="20" class="el-row" type="flex">
            <el-col :span="10" class="el-col" type="flex">
              <div class="text item">
                <el-form-item label="真实姓名:" prop="userName">
                  <el-input
                    v-model="contractData.contacts"
                    style="width: 80%"
                    size="small"
                    :disabled="true"
                  ></el-input>
                </el-form-item>
              </div>
            </el-col>
            <el-col :span="10" class="el-col">
              <div class="text item">
                <div class="text item">
                  <el-form-item label="手机:" prop="employeeName">
                    <el-input
                      v-model="contractData.mobile"
                      size="small"
                      style="width: 80%"
                      type="number"
                      :disabled="true"
                    ></el-input>
                  </el-form-item>
                </div>
              </div>
            </el-col>
          </el-row>

          <el-row :gutter="20" class="el-row" type="flex">
            <el-col :span="10" class="el-col" type="flex">
              <div class="text item">
                <el-form-item label="联系电话:" prop="tel">
                  <el-input
                    v-model="contractData.tel"
                    style="width: 80%"
                    size="small"
                    :disabled="true"
                  ></el-input>
                </el-form-item>
              </div>
            </el-col>
            <el-col :span="10" class="el-col">
              <div class="text item">
                <div class="text item">
                  <el-form-item label="邮箱:" prop="email">
                    <el-input
                      v-model="contractData.email"
                      size="small"
                      style="width: 80%"
                      :disabled="true"
                    ></el-input>
                  </el-form-item>
                </div>
              </div>
            </el-col>
          </el-row>
        </el-form>

        <div slot="footer" class="dialog-footer">
          <el-button @click.native="cancelDialog" size="small">确定</el-button>
        </div>
      </el-dialog>

      <div v-if="customerVisible">
        <el-dialog
          title="系统用户"
          :visible.sync="customerVisible"
          width="60%"
          append-to-body
          :modal-append-to-body="false"
          :close-on-click-modal="false"
          @close="closeCustomerDialog"
        >
          <customerUser :currentCustomer="currentCustomer"
                        :closeCustomerDialog="closeCustomerDialog" ></customerUser>
        </el-dialog>
      </div>
      <pagination
        v-show="total>0"
        :total="total"
        :limit.sync="filterQuery.limit"
        :page.sync="filterQuery.page"
        @pagination="handleCurrentChange"
      ></pagination>
    </el-card>
    <el-image-viewer
      v-if="imgViewerVisible"
      style="z-index: 9999"
      :on-close="closeImgViewer"
      :url-list="imgList"
    />
  </div>
</template>

<script>
import { search } from "@/api/sup/userComany";
import {filterCompanyCert} from "@/api/sup/userCert";
import {previewImage} from "@/api/purchase/supCompany";
import ElImageViewer from "element-ui/packages/image/src/image-viewer";
import customerUser from "./customerUser";




export default {
  data() {
    return {
      BASE_URL: process.env.VUE_APP_BASE_API,
      imgList:[],
      imgViewerVisible: false,
      certLoading: false,
      certList:[],
      filterQuery: {
        companyName: "",
        page: 1,
        limit: 20,
      },
      query:{
        businessId:"",
        page: 1,
        limit: 20,
      },
      value: "",
      total: 0,
      checkFlag: {
        3: "未审核",
        1: "已通过",
        2: "已拒绝",
        0:"未认证",
      },

      bussinessFlag: {
        1: "生产企业",
        2: "流通企业",
        3:  "医疗机构",
        4: "监管机构",
      },
      list: [],
      statusFlag: {
        1: "有效",
        0: "失效",
      },
      formVisible: false,
      contractVisible: false,
      customerVisible: false,
      timer: "",
      formData: {
        customerName: "111",
        userMax: "",
        isInfoLink: "",
        infoLink: "",
        customerId: "",
        userFlag: "",
        roleId: "",
        pdfTemplateId: "",
      },
      contractData: {
        contacts: "",
        mobile: "",
        tel: "",
        email: "",
      },
      currentCustomer: "",
      check: "",
      roles: [],
      pdfTemplates: [],
    };
  },
  filters: {
    statusType(status) {
      const statusMap = {
        1: "success",
        0: "danger",
      };
      return statusMap[status];
    },
  },
  methods: {
    onReset() {
      this.$router.push({
        path: "",
      });
      this.filterQuery = {
        companyName: "",
        page: 1,
        limit: 20,
      };
      this.getList();
      this.filterQuery.page = 1;
    },
    formSubmit() {
      this.formVisible=false;
    },
    onSubmit() {
      this.filterQuery.page = 1;
      this.filterQuery.searchKey= this.filterQuery.companyName;
      this.getList();
    },
    getList() {
      this.loading = true;
      search(this.filterQuery)
        .then((response) => {
          this.loading = false;
          this.list = response.data.list || [];
          this.total = response.data.total || 0;
        })
        .catch(() => {
          this.loading = false;
          this.list = [];
          this.total = 0;
        });
    },

    showImgViewer(row) {
      this.certFileUrl =
        this.BASE_URL +
        "/udiwms/image/register/file/getImage?type=image2&name=";
      this.imgList = [];
      previewImage({
        imageUrl: row.filePath,
        certFileUrl: this.certFileUrl,
      }).then((response) => {
        if (response.code === 20000) {
          this.imgList = response.data;
        }
        console.log(this.imgList);
        this.imgViewerVisible = true;
      });
      const m = (e) => {
        e.preventDefault();
      };
      document.body.style.overflow = "hidden";
      document.addEventListener("touchmove", m, false); // 禁止页面滑动
    },

    closeImgViewer() {
      this.imgViewerVisible = false;
      const m = (e) => {
        e.preventDefault();
      };
      document.body.style.overflow = "auto";
      document.removeEventListener("touchmove", m, true);
    },

    getCertList(){
      filterCompanyCert(this.query).then((res) =>{
        this.certList = res.data.list || []
        this.certTotal = res.data.total;
      })
    },

    hideForm() {
      this.customerVisible = false;
    },
    cancelDialog() {
      this.formVisible = false;
      this.contractVisible = false;
    },

    handleSizeChange(val) {
      this.filterQuery.limit = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.filterQuery.page = val.page;
      this.getList();
    },
    handleCheckedChange(val) {
    },

    customerkDialog(row) {
      this.currentCustomer = row.id;
      this.customerVisible = true;
    },

    closeCustomerDialog() {
      this.currentCustomer = null;
      this.customerVisible = false;
    },
    checkDialog(row) {
       this.formData=row;
      this.formVisible = true;
      this.query.businessId=row.id;
      this.getCertList();
    },

    contractDialog(row) {
      (this.contractData = {
        contacts: row.contacts,
        mobile: row.mobile,
        tel: row.tel,
        email: row.email,
      }),
        (this.contractVisible = true);
    },

  },
  components: {ElImageViewer,customerUser
  },



  created() {
    this.getList();
  },
};
</script>
