<template>
  <div class="app-container">
    <div class="app-container-search main-bgcolor main-radius">
      <h1 class="">商户管理</h1>
      <br />
      <!-- 搜索工作栏 -->
      <SearchInfo
          ref="searchForm"
          :searchFormParam="searchFormParam"
          :showSearch.sync="showSearch"
          @handleQuery="handleQuery"
          @resetQuery="resetQuery"
      ></SearchInfo>
    </div>

    <div class="app-container-list main-bgcolor main-radius shopping">
      <div class="shopping-top">
        <div class="shopping-title">商户列表</div>
        <el-button class="shopping-add-btn" type="primary" plain @click="handleAdd"
          v-hasPermi="['basic:business-info:create']">添加商户</el-button>
      </div>

      <!-- 列表 -->
      <el-table v-loading="loading" :data="list" >
        <el-table-column label="编号" align="center" type="index" width="80" >
          <template v-slot="{ $index }">
            <span>{{($index+1)+ (searchFormParam.queryParams.pageNo-1)*searchFormParam.queryParams.pageSize }}</span>
          </template>
        </el-table-column>
        <el-table-column label="商户名称" align="center" prop="businessName" />
        <el-table-column label="商户标识码" align="center" prop="businessId" />
        <!-- <el-table-column label="子系统" align="center" prop="codeRuleId" /> -->
        <!-- 用户暂无认证状态修改功能 -->
        <!-- <el-table-column label="认证状态" align="center" prop="verifyState" >
          <template v-slot="scope">
            <dict-tag :type="DICT_TYPE.VERIFY_STATUS" :value="scope.row.verifyState" />
          </template>
        </el-table-column> -->
        <el-table-column label="备注" align="center" prop="remarks" :show-overflow-tooltip="true"/>
        <el-table-column label="操作" fixed="right" align="center" class-name="small-padding fixed-width" width="300">
          <template v-slot="scope">
            <el-button size="mini" type="text" icon="el-icon-goods" @click="getCode(scope.row.id)">查看溯源码</el-button>
            <el-button size="mini" type="text" icon="el-icon-goods" @click="getGoods(scope.row)">查看商品</el-button>
            <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
                      v-hasPermi="['basic:business-info:update']">编辑</el-button>
            <!-- <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
                      v-hasPermi="['basic:business-info:delete']">删除</el-button> -->
          </template>
        </el-table-column>
        <div slot="empty">
            <EmptyTable />
        </div>
      </el-table>
      <!-- 分页组件 -->
      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="searchFormParam.queryParams.pageNo"
        :limit.sync="searchFormParam.queryParams.pageSize"
        @pagination="getList"
      />
    </div>

    <!-- 对话框(修改) -->
    <el-dialog :title="title" :visible.sync="openedit" width="500px" v-dialogDrag append-to-body>
      <el-form ref="form" :model="form" :rules="rules"  label-position="top" >
        <el-form-item label="商户名称" prop="businessName" >
          <el-input v-model="form.businessName" placeholder="请输入商户名称" maxlength="64" />
        </el-form-item>
        <el-form-item label="所属行政区" prop="area">

          <!-- 下拉框地区操作先财要求修改的功能 <div style="display: flex;">
            <CascaderArea style="flex: 1;" :pca="areaList" :isValue="form.area" ref="cascaderArea" v-model="form.area" @transfer="getArea"></CascaderArea>
          </div> -->
          <el-input v-model="form.area" placeholder="请输入所属行政区地址" maxlength="12" />
        </el-form-item>
        <el-form-item label="认证方式" prop="verifyType">
            企业认证
        </el-form-item>
        <el-form-item label="企业名称" prop="companiesName">
          <el-input v-model="form.companiesName" placeholder="请输入企业名称" maxlength="64" />
        </el-form-item>
        <el-form-item label="统一社会信用代码" prop="businessCode">
          <el-input v-model="form.businessCode" placeholder="请输入商户统一信用代码" maxlength="20" />
        </el-form-item>
        <el-form-item label="法人姓名" prop="legalName">
          <el-input v-model="form.legalName" placeholder="请输入法人姓名" maxlength="64" />
        </el-form-item>
        <el-form-item label="法人身份证" prop="legalIdCard">
          <el-input v-model="form.legalIdCard" placeholder="请输入法人身份证" maxlength="32" />
        </el-form-item>
        <el-form-item label="备注" prop="remarks">
          <el-input v-model="form.remarks" type="textarea" placeholder="请输入内容" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancelEdit">取 消</el-button>
      </div>
    </el-dialog>

   <el-dialog
     title="标识二维码"
     :visible.sync="dialogVisible"
     :width="'300px'">
     <div class="flex-allcenter codeId" v-if="dialogVisible"></div>
     <span slot="footer" class="dialog-footer">
       <el-button @click="dialogVisible = false">取 消</el-button>
     </span>
   </el-dialog>
  </div>
</template>

<script>
import { createBusinessInfo, updateBusinessInfo, deleteBusinessInfo, getBusinessInfo, getBusinessInfoPage } from "@/api/basic/businessInfo";
import { getAreaTree } from "@/api/system/area";
import SearchInfo from "@/components/Customer/SearchForm/index.vue"
import EmptyTable from '@/components/EmptyTable'
import CascaderArea from "@/components/Customer/Cascader/area"
import QRCode from "qrcodejs2"
export default {
  name: "BusinessInfo",
  components: {
    SearchInfo,
    EmptyTable,
    CascaderArea,
  },
  data() {
    return {
      //默认码规则ID
      defaultCodeId:0,
      //获取的地区信息列表
      areaList:[],
      // 遮罩层
      loading: true,
      // 显示搜索条件
      showSearch: true,
      //码规则
      openCodeRule:false,
      // 总条数
      total: 0,
      // 商户列表
      list: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 是否显示弹出添加窗口
      openadd:false,
      // 是否显示弹出修改窗口
      openedit:false,
      //头部查询表单组件的参娄
      searchFormParam:{
        // 查询参数
        queryParams: {
          pageNo: 1,
          pageSize: 10,
          businessName: null,
          verifyState:null,
        },
        //表单对象
        dataSource:[
          {
            key:'businessName',
            itemType:'input',
            label:'商户名称',
            placeholder:'请输入',
            onEnterKeyUp:this.handleQuery
          },
        ],

      },
      // 表单参数
      form: {},
      // 临时表单参数
      codeRuleList: {},
      // 表单校验
      rules: {
        businessName: [{ required: true, message: "商户名称不能为空", trigger: "blur" }],
        businessId: [{ required: true, message: "商户编码不能为空", trigger: "blur" }],
        area: [{ required: true, message: "所属行政区不能为空", trigger: "blur" }],
        remarks: [{ max: 32, message: '备注说明不能超过32个字符', trigger: 'blur'}],
        companiesName: [{ required: true, message: "商户名称不能为空", trigger: "blur" }],
        legalIdCard: [{
          pattern: /(^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$)|(^[1-9]\d{5}\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{2}$)/,
          message: '身份证号码格式有误！',
          trigger: 'blur',
        }],
      },
      // 码规则配置是否展示
      openCodeRule: false,
      // 码规则内容
      rulesContent: {},
      // 码规则表单
      formCode: {
        codeRuleName: "",
        codeRuleFormat: "",
        codeType: "",
      },
      //当前码规则所属商户id
      thisCodeBelongBusinessId:null,
      rulesCode: {
        codeRuleName: [
          { required: true, message: '请输入码规则名称', trigger: 'change' },
        ],
        codeRuleFormat: [
          { required: true, message: '请输入码规则', trigger: 'change' }
        ],
        codeType: [
          { required: true, message: '请选择码类型', trigger: 'change' }
        ],
      },
      rowInfo: {},
      showAddBtn: true,
      dialogVisible: false,
    };
  },
  created() {
    this.getList();
    this.getAreaList();
  },
  methods: {
    getCode(businessId){
      this.dialogVisible = true;
      setTimeout(()=>{
        this.generateQRCode('.codeId',businessId);
      },1000);
    },
    // 生成二维码
    generateQRCode(classId,value) {
      console.log(value);
      new QRCode(document.querySelector(classId), {
        text: 'https://trace.minipro.yuanhaotest.com/job?id='+value,
        width: 240,
        height: 240,
        colorDark: "#000000",
        colorLight: "#ffffff",
        correctLevel: QRCode.CorrectLevel.H
      })
    },
    /** 地区查询列表 */
    getAreaList() {
      getAreaTree().then(response => {
        this.areaList = response.data;
      })
    },
    /** 查询列表 */
    getList() {
      this.loading = true;
      // 执行查询
      getBusinessInfoPage(this.searchFormParam.queryParams).then(response => {
        this.list = response.data.list;
        this.total = response.data.total;
        this.loading = false;
      });
    },
    /** 获取当前分页列表 */
    getBusinessInfoList() {
      this.loading = true;
      let queryParams = {
          pageNo: this.searchFormParam.queryParams.pageNo,
          pageSize: this.searchFormParam.queryParams.pageSize,
      }
      // 执行查询
      getBusinessInfoPage(queryParams).then(response => {
        this.list = response.data.list;
        this.total = response.data.total;
        this.loading = false;
      });
    },
    /** 取消按钮 */
    cancel() {
      this.openadd = false;
      this.reset();
    },
    cancelAdd() {
      this.openadd = false;
      this.reset();
    },
    cancelEdit() {
      this.openedit = false;
      this.reset();
    },

    /** 表单重置 */
    reset() {
      this.form = {
        id: undefined,
        businessName: undefined,
        companiesName: undefined,
        businessId: undefined,
        codeRuleId: undefined,
        area: undefined,
        businessCode: undefined,
        legalName: undefined,
        legalIdCard: undefined,
        remarks: undefined,
        verifyState: undefined,
      };
      this.resetForm("form");
    },
    resetCode() {
      this.formCode = {
        codeRuleName: undefined,
        codeRuleFormat: undefined,
        codeType: undefined,
      };
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.searchFormParam.queryParams.pageNo = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm", "searchForm");
      this.handleQuery();
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.openedit = true;
      this.title = "添加商户";
    },
    getGoods(row) {
      this.$router.push({
            path: '/goods/goods-info',
            query: {businessName: row.businessName, name: "businessId"}
      })
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      const id = row.id;
      getBusinessInfo(id).then(response => {
        this.form = response.data;
        this.openedit = true;
        this.title = "修改商户";
      });
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (!valid) {
          return;
        }
        // 修改的提交
        if (this.form.id != null) {
          updateBusinessInfo(this.form).then(response => {
            this.$modal.msgSuccess("修改成功");
            this.openedit = false;
            this.getBusinessInfoList();
          });
          return;
        }
        // 添加的提交
        createBusinessInfo(this.form).then(response => {
          this.$modal.msgSuccess("新增成功");
          this.openedit = false;
          this.getBusinessInfoList();
        });
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const id = row.id;
      this.$modal.confirm('是否确认删除该商户?').then(() => {
          return deleteBusinessInfo(id);
        }).then(response => {
          if(response.code == 1010001005){
            this.$modal.msgSuccess(response.msg);
          }else{
            this.getBusinessInfoList();
            this.$modal.msgSuccess("删除成功");
          }

        }).catch(() => {});
    },

    //父组件中获取地区组件传递参数方法
    getArea(val){
      this.form.area = val
    }
  }
};
</script>
<style scoped lang="scss">
  .code-rules{
    .rules-area{
      width: calc(100% - 40px);
      box-sizing: border-box;
      margin: 20px;
      border: 1px solid rgb(222, 222, 222);
      .rules-title{
        padding: 20px;
        border-bottom: 1px solid rgb(222, 222, 222);
        line-height: 16px;
        font-size: 16px;
        .rules-button>button{
          padding: 0;
          font-size: 14px;
        }
      }
      .rules-content{
        padding: 20px;
        font-size: 14px;
        .rules-item{
          margin-bottom: 20px;
        }
        .rules-item:last-child{
          margin-bottom: 0px;
        }
      }
    }
    .rules-btn-area{
      margin: 10px 20px;
      padding: 6px 0;
      display: flex;
      align-items: center;
      justify-content: center;
      border: 1px dashed rgb(222,222,222);
      .buttonText{
        margin-left: 6px;
      }
    }
    .rules-btn-area:hover{
      border-color: rgb(64, 169, 255);
      color: rgb(64, 169, 255);
      cursor: pointer;
    }
  }
</style>
