<template>
  <div>
    <obj-modal
      ref="modal"
      labelWidth="150px"
      :modalConfig="modalConfig"
      :modalData="modalData"
      :modalHandles="modalHandles"
    >
      <template slot="dialog__content">
        <el-form :model="modalData" ref="modalForm">
          <el-row v-show="process == 1">
            <el-row>
              <el-col :span="12">
                <el-form-item
                  label-width="150px"
                  label="银行类型："
                  prop="bankType"
                >
                  <el-select
                    disabled
                    style="width: 300px"
                    v-model="modalData.bankType"
                    placeholder="请选择"
                  >
                    <el-option
                      v-for="item in [
                        { label: '摊主银行卡', value: 1 },
                        { label: '代理银行卡', value: 2 },
                        { label: '专员银行卡', value: 3 },
                        { label: '分销银行卡', value: 4 },
                        { label: '用户银行卡', value: 5 },
                      ]"
                      :label="item.label"
                      :value="item.value"
                      :key="item.value"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label-width="150px" label="企业名称" prop="cas">
                  <el-input
                    readonly
                    style="width: 300px"
                    v-model="modalData.name"
                    placeholder="请输入企业名称："
                  >
                  </el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label-width="150px" label="省份：" prop="prov">
                  <el-select
                    disabled
                    style="width: 300px"
                    @change="handleChange"
                    v-model="modalData.prov"
                    placeholder="请选择"
                  >
                    <el-option
                      v-for="item in this.$api.mer_admin.getCityOptions()"
                      :key="item.name"
                      :label="item.name"
                      :value="item.name"
                    >
                    </el-option>
                  </el-select>
                  <!-- <el-cascader
                    v-model="productPlace"
                    style="width: 300px"
                    :options="this.$api.mer_admin.getCityOptions()"
                    @change="handleChange"
                    clearable
                    :props="{
                      value: 'name',
                      label: 'name',
                      children: 'children',
                    }"
                  ></el-cascader> -->
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label-width="150px" label="地级市：" prop="cas">
                  <el-input
                    readonly
                    style="width: 300px"
                    v-model="modalData.area"
                    placeholder="请输入地区"
                  >
                  </el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item
                  label-width="150px"
                  label="社会信用码："
                  prop="prov"
                >
                  <el-input
                    readonly
                    style="width: 300px"
                    v-model="modalData.socialCreditCode"
                    placeholder="请输入社会信用码"
                  >
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item
                  label-width="150px"
                  label="社会信用码有效期："
                  prop="socialCreditCodeExpires"
                >
                  <el-date-picker
                    disabled
                    value-format="yyyy-MM-dd"
                    style="width: 300px"
                    v-model="modalData.socialCreditCodeExpires"
                    type="date"
                    placeholder="选择日期"
                  >
                  </el-date-picker>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item
                  label-width="150px"
                  label="经营范围："
                  prop="businessScope"
                >
                  <el-input
                    readonly
                    style="width: 300px"
                    v-model="modalData.businessScope"
                    placeholder="请输入经营范围"
                  >
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item
                  label-width="150px"
                  label="法人姓名："
                  prop="legalPerson"
                >
                  <el-input
                    readonly
                    style="width: 300px"
                    v-model="modalData.legalPerson"
                    placeholder="请输入法人姓名"
                  >
                  </el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item
                  label-width="150px"
                  label="	法人身份证号码："
                  prop="legalCertId"
                >
                  <el-input
                    readonly
                    style="width: 300px"
                    v-model="modalData.legalCertId"
                    placeholder="请输入法人身份证号码"
                  >
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item
                  label-width="150px"
                  label="法人身份证有效期："
                  prop="legalCertIdExpires"
                >
                  <el-date-picker
                    disabled
                    value-format="yyyy-MM-dd"
                    style="width: 300px"
                    v-model="modalData.legalCertIdExpires"
                    type="date"
                    placeholder="选择日期"
                  >
                  </el-date-picker>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item
                  label-width="150px"
                  label="法人手机号："
                  prop="legalMp"
                >
                  <el-input
                    readonly
                    style="width: 300px"
                    v-model="modalData.legalMp"
                    placeholder="请输入法人手机号"
                  >
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item
                  label-width="150px"
                  label="企业地址："
                  prop="address"
                >
                  <el-input
                    readonly
                    style="width: 300px"
                    v-model="modalData.address"
                    placeholder="请输入企业地址"
                  >
                  </el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item
                  label-width="150px"
                  label="银行代码："
                  prop="bankCode"
                >
                  <el-input
                    readonly
                    style="width: 300px"
                    v-model="modalData.bankCode"
                    placeholder="请输入银行代码"
                  >
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item
                  label-width="150px"
                  label="银行卡号："
                  prop="cardNo"
                >
                  <el-input
                    readonly
                    style="width: 300px"
                    v-model="modalData.cardNo"
                    placeholder="请输入银行卡号"
                  >
                  </el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item
                  label-width="150px"
                  label="银行卡对应户名："
                  prop="cardName"
                >
                  <el-input
                    readonly
                    style="width: 300px"
                    v-model="modalData.cardName"
                    placeholder="请输入银行卡对应户名"
                  >
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item
                  label-width="150px"
                  label="银行卡类型："
                  prop="bankAcctType"
                >
                  <el-select
                    disabled
                    style="width: 300px"
                    v-model="modalData.bankAcctType"
                    placeholder="请输入银行卡类型"
                  >
                    <el-option
                      v-for="item in [
                        { label: '公账', value: 1 },
                        { label: '私账', value: 2 },
                      ]"
                      :label="item.label"
                      :value="item.value"
                      :key="item.value"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item
                  label-width="150px"
                  label="营业执照号："
                  prop="licenseNumber"
                >
                  <el-input
                    readonly
                    style="width: 300px"
                    v-model="modalData.licenseNumber"
                    placeholder="请输入营业执照号"
                  >
                  </el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </el-row>
          <el-row v-show="process == 2">
            <el-row>
              <el-col :span="12">
                <el-form-item
                  label-width="150px"
                  label="营业执照图片："
                  prop="licensePicture"
                >
                  <el-image
                    style="width: 100px; height: 100px"
                    :src="modalData.licensePicture"
                    :preview-src-list="[modalData.licensePicture]"
                  >
                  </el-image>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item
                  label-width="150px"
                  label="法人身份证正面国徽："
                  prop="idCardFront"
                >
                  <el-image
                    style="width: 100px; height: 100px"
                    :src="modalData.idCardFront"
                    :preview-src-list="[modalData.idCardFront]"
                  >
                  </el-image>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item
                  label-width="150px"
                  label="法人身份证背面人像："
                  prop="idCardBack"
                >
                  <el-image
                    style="width: 100px; height: 100px"
                    :src="modalData.idCardBack"
                    :preview-src-list="[modalData.idCardBack]"
                  >
                  </el-image>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item
                  label-width="150px"
                  label="开户银行许可证照："
                  prop="bankLicense"
                >
                  <el-image
                    style="width: 100px; height: 100px"
                    :src="modalData.bankLicense"
                    :preview-src-list="[modalData.bankLicense]"
                  >
                  </el-image>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item
                  label-width="150px"
                  label="手持身份证正面国徽(选传)："
                  prop="handIdCardFront"
                >
                  <el-image
                    style="width: 100px; height: 100px"
                    :src="modalData.handIdCardFront"
                    :preview-src-list="[modalData.handIdCardFront]"
                  >
                  </el-image>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item
                  label-width="150px"
                  label="手持身份证背面人像(选传)："
                  prop="handIdCardBack"
                >
                  <el-image
                    style="width: 100px; height: 100px"
                    :src="modalData.handIdCardBack"
                    :preview-src-list="[modalData.handIdCardBack]"
                  >
                  </el-image>
                </el-form-item>
              </el-col>
            </el-row>
          </el-row>
        </el-form>
      </template>
    </obj-modal>
  </div>
</template>
<script>
import { debounce, cloneDeep } from "lodash";
import { Divider } from "element-ui";
export default {
  components: {},
  data() {
    return {
      isAdd: true,
      //表格属性
      modalConfig: {
        title: "详情",
        show: false,
        width: "1000px",
      },
      modalData: {},
      ProductData: {},
      productPlace: "", //地区
      fileList: [],
      process: 1,
    };
  },
  methods: {
    queryTableData(pageNo, pageSize) {},
    toggle(e) {
      if (this.modalConfig.show == false) {
        this.modalConfig.show = true;
      } else {
        this.modalConfig.show = false;
      }
      if (e) {
        this.init(cloneDeep(e.row));
      }
      return {
        add: () => {
          this.modalConfig.title = "添加银行卡";
          this.process = 1;
          this.productPlace = "";
          this.$nextTick(() => {
            this.modalData = {
              linkId: JSON.parse(sessionStorage.getItem("userInfo")).managerId
                ? JSON.parse(sessionStorage.getItem("userInfo")).managerId
                : JSON.parse(sessionStorage.getItem("userInfo")).merchantId,
              bankType: "",
              name: "",
              prov: "",
              area: "",
              socialCreditCode: "",
              socialCreditCodeExpires: "",
              businessScope: "",
              legalPerson: "",
              legalCertId: "",
              legalCertIdExpires: "",
              legalMp: "",
              address: "",
              bankCode: "",
              cardNo: "",
              cardName: "",
              licensePicture: "",
              idCardFront: "",
              idCardBack: "",
              bankLicense: "",
              handIdCardFront: "",
              handIdCardBack: "",
              bankAcctType: "",
              licenseNumber: "",
            };
            this.$refs.modal.resetFields();
          });
          this.isAdd = true;
        },
        update: () => {
          this.process = 1;
          this.modalData.title = "详情";
          this.isAdd = false;
        },
      };
    },
    init(row) {
      console.log(row);
      this.modalData = row;
    },
    handleChange(e) {
      console.log(e);
      // this.modalData.prov = e.join("-");
    },
    handleAvatarSuccess(res) {
      console.log(res);
      this.modalData.licensePicture = res.data;
    },
    idCardFrontImg(res) {
      console.log(res);
      this.modalData.idCardFront = res.data;
    },
    idCardBackImg(res) {
      console.log(res);
      this.modalData.idCardBack = res.data;
    },
    bankLicenseImg(res) {
      console.log(res);
      this.modalData.bankLicense = res.data;
    },
    handIdCardFrontImg(res) {
      console.log(res);
      this.modalData.handIdCardFront = res.data;
    },
    handIdCardBackImg(res) {
      console.log(res);
      this.modalData.handIdCardBack = res.data;
    },
  },
  computed: {
    modalHandles() {
      return [
        {
          label: "取消",
          handle: () => {
            this.toggle();
          },
        },
        {
          label: "上一页",
          type: "primary",
          disabled: () => this.process == 1,
          handle: () => {
            console.log(this.modalData);
            this.process = 1;
          },
        },
        {
          label: this.process == 1 ? "下一页" : "确定",
          type: "primary",
          handle: () => {
            if (this.process == 1) {
              this.process = 2;
            } else {
              this.toggle();
            }
          },
        },
      ];
    },
  },
  asyncComputed: {},
};
</script>
<style lang="scss" scoped>
.introduce {
  padding: 5px;
  background: #fdf6ec;
  text-align: center;
}
.introduce-center {
  margin-bottom: 10px;
}
</style>