<template>
  <div>
    <el-form :inline="true" :model="filterQuery" class="query-form" size="mini">
      <el-row>
        <el-form-item class="query-form-item">
          <el-input
            v-model="filterQuery.batchNo"
            placeholder="客户名称"
          ></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="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%">
      <el-table-column label="序号" type="index"></el-table-column>
      <el-table-column
        label="企业名称"
        prop="companyName"
        width="230"
      ></el-table-column>
      <el-table-column
        label="社会统一信用号"
        prop="creditNum"
        width="160"
      ></el-table-column>
      <el-table-column label="所属地区" prop="area" width="180">
      </el-table-column>
      <el-table-column
        label="详细地址"
        prop="detailAddr"
        width="230"
        :show-overflow-tooltip="true"
      >
      </el-table-column>

      <el-table-column label="企业类型" prop="bussinessStatus" width="120">
        <template slot-scope="scope">
          <span>{{ bussinessFlag[scope.row.bussinessStatus] }}</span>
        </template>
      </el-table-column>
      <el-table-column label="客户状态" prop="userFlag" width="120">
        <template slot-scope="scope">
          <el-tag :type="scope.row.userFlag | statusFilterType">{{
            scope.row.userFlag | statusFilterName
          }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="是否弹窗" prop="isInfoLink" width="120">
        <template slot-scope="scope">
          <span>{{ isTip[scope.row.isInfoLink] }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="弹窗链接"
        prop="infoLink"
        width="180"
        :show-overflow-tooltip="true"
      >
      </el-table-column>

      <el-table-column label="角色" prop="role" width="120"> </el-table-column>
      <el-table-column label="最大用户数" prop="userMax" width="120">
      </el-table-column>
      <el-table-column label="当前用户数" prop="count" width="120">
      </el-table-column>

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

            <el-button
              type="text"
              size="mini"
              @click.native.stop="contractDialog(scope.row)"
              >查看联系人</el-button
            >
          </el-button-group>
        </template></el-table-column
      >
      <el-table-column label="操作" fixed="right" width="120">
        <template slot-scope="scope">
          <el-button
            type="text"
            size="small"
            @click.native.stop="checkDialog(scope.row)"
            >编辑</el-button
          >

          <el-button
            type="text"
            size="small"
            @click.native.stop="deleteDialog(scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-dialog title="客户信息编辑" :visible.sync="formVisible" width="60%">
      <el-form :model="formData" 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="formData.customerName"
                  style="width: 60%"
                  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="formData.userMax"
                    size="small"
                    style="width: 40%"
                    type="number"
                  ></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="isInfoLink">
                <el-select
                  v-model="formData.isInfoLink"
                  placeholder="是否弹窗提示"
                >
                  <el-option label="否" value="0"></el-option>
                  <el-option label="是" value="1"></el-option>
                </el-select>
              </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="infoLink">
                  <el-input
                    style="width: 60%"
                    size="small"
                    v-model="formData.infoLink"
                  ></el-input>
                </el-form-item>
              </div>
            </div>
          </el-col>
        </el-row>

        <el-form-item label="状态：" prop="userFlag">
          <el-radio-group v-model="formData.userFlag">
            <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="分配角色：">
          <el-radio-group v-model="check" @change="handleCheckedChange">
            <el-radio v-for="item in roles" :key="item.id" :label="item.id">{{
              item.name
            }}</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>

      <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="68%"
        :modal-append-to-body="false"
        @close="closeCustomerDialog"
      >
        <customerUser :currentCustomer="currentCustomer"></customerUser>
      </el-dialog>
    </div>
    <el-pagination
      :page-size="filterQuery.limit"
      @current-change="handleCurrentChange"
      layout="prev, pager, next"
      :total="total"
    ></el-pagination>
  </div>
</template>

<script>
import { getRegisters, checkPass, deleteRe } from "../../api/auth/register";
import { authAdminRoleList, authCustomerRoles } from "../../api/auth/authAdmin";
import {
  getCustomers,
  updateCustomers,
  deleteCustomers,
} from "../../api/auth/customer";
import customerUser from "./customerUser";
export default {
  data() {
    return {
      filterQuery: {
        companyName: "",
        checkType: "",
        page: 1,
        limit: 20,
      },
      value: "",
      total: 0,
      checkFlag: {
        0: "未审核",
        1: "已通过",
        2: "已拒绝",
      },

      userflag: {
        0: "禁用",
        1: "正常",
        2: "未验证",
      },
      bussinessFlag: {
        1: "生产企业",
        2: "流通企业",
        3: "医疗机构",
        4: "监管机构",
      },
      list: [],
      isTip: {
        0: "否",
        1: "是",
      },
      formVisible: false,
      contractVisible: false,
      customerVisible: false,
      timer: "",
      formData: {
        customerName: "111",
        userMax: "",
        isInfoLink: "",
        infoLink: "",
        customerId: "",
        userFlag: "",
        roleId: "",
      },
      contractData: {
        contacts: "",
        mobile: "",
        tel: "",
        email: "",
      },
      currentCustomer: "",
      check: "",
      roles: [],
    };
  },
  filters: {
    statusFilterType(status) {
      const statusMap = {
        0: "gray",
        1: "success",
        2: "danger",
      };
      return statusMap[status];
    },
    statusFilterName(status) {
      const statusMap = {
        0: "禁用",
        1: "正常",
        2: "未验证",
      };
      return statusMap[status];
    },
  },
  methods: {
    onReset() {
      this.$router.push({
        path: "",
      });
      this.filterQuery = {
        companyName: "",
        page: 1,
        limit: 20,
      };
      this.getList();
    },
    formSubmit() {
      this.formData.roleId = this.check;
      updateCustomers(this.formData)
        .then((response) => {
          this.loading = false;
          this.cancelDialog();
          this.getList();
        })
        .catch(() => {
          this.cancelDialog();
          this.loading = false;
        });
    },
    onSubmit() {
      this.getList();
    },
    getList() {
      this.loading = true;
      getCustomers(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;
        });
    },
    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;
      this.getList();
    },
    handleCheckedChange(val) {
      console.log(val);
      console.log(this.check);
    },
    checkRegister(tquery) {
      this.loading = true;
      checkPass(tquery)
        .then((response) => {
          if (response.code == 20000) {
            this.getList();
            this.$message({
              type: "success",
              message: "更新成功！",
            });
          } else {
            this.$message.warning("更新失败");
          }
        })
        .catch(() => {});
    },
    customerkDialog(row) {
      this.currentCustomer = row.customerId;
      this.timer = new Date().getTime();
      console.log("this.currentCustomer = " + this.currentCustomer);
      this.customerVisible = true;
    },

    closeCustomerDialog() {
      console.log("this.currentCustomer 关闭 = " + this.currentCustomer);

      this.currentCustomer = null;
    },
    checkDialog(row) {
      console.log(row.customerName);
      (this.formData = {
        customerName: row.companyName,
        userMax: row.userMax,
        isInfoLink: row.isInfoLink + "",
        infoLink: row.infoLink,
        customerId: row.customerId,
        userFlag: row.userFlag,
      }),
        (this.check = parseInt(row.roleId));
      console.log(this.check);
      this.formVisible = true;
    },

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

    deleteDialog(row) {
      this.$confirm("删除后将清空该客户下所有用户?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          let tQuery = {
            id: row.customerId,
          };
          deleteCustomers(tQuery).then(() => {
            this.getList();
          });
        })
        .catch(() => {});
    },

    getRoleList() {
      authCustomerRoles()
        .then((response) => {
          this.roles = response.data.list || [];
          console.log("888---" + this.checkQuery.roles);
        })
        .catch(() => {});
    },
  },
  components: {
    customerUser,
  },
  mounted() {},
  created() {
    this.getList();
    this.getRoleList();
  },
};
</script>