<template>
  <el-dialog
    :title="'财务信息'"
    :center="true"
    align="left"
    width="1040px"
    @close="closeModel"
    :close-on-click-modal="false"
    :visible.sync="showModelThis"
    v-loading="loading"
    element-loading-text="拼命加载中"
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(0, 0, 0, 0.8)"
  >
    <el-card style="margin-top: -16px">
      <el-row :gutter="10" v-if="editModal === false">
        <el-col :span="24" style="padding: 0 5px 8px 0">
          <span style="height: 36px; line-height: 36px; padding: 0 0 0 8px">{{
            title
          }}</span>
          <el-button
            :size="searchSize"
            type="success"
            style="float: right"
            @click="openModal('add')"
          >
            添加
          </el-button>
        </el-col>
        <el-col :span="24">
          <el-table
            :data="tableData"
            stripe
            v-loading="loading"
            border
            :size="size"
            style="width: 100%"
          >
            <el-table-column
              prop="bank_name"
              label="开户银行"
              show-overflow-tooltip
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="company"
              label="账号"
              show-overflow-tooltip
              align="center"
            >
            </el-table-column>

            <el-table-column label="状态" show-overflow-tooltip align="center">
              <template slot-scope="scope">
                <el-tag
                  :size="tablebtnSize"
                  v-if="scope.row.status === '1'"
                  type="success"
                  @click="statusConfirm(scope.row.id, scope.row.status)"
                  ><i class="el-icon-thumb" style="margin-right: 1px"></i
                  >启用</el-tag
                >
                <el-tag
                  v-else
                  :size="tablebtnSize"
                  type="warning"
                  @click="statusConfirm(scope.row.id, scope.row.status)"
                  ><i class="el-icon-thumb" style="margin-right: 1px"></i
                  >禁用</el-tag
                >
              </template>
            </el-table-column>
            <el-table-column
              prop="bank_addr"
              label="开户行地址"
              show-overflow-tooltip
              align="center"
            ></el-table-column>
          </el-table>
        </el-col>
      </el-row>
      <el-row :gutter="10" v-else>
        <el-form
          :model="ruleForm"
          status-icon
          :rules="rulesThis"
          ref="ruleForm"
          label-width="120px"
          class="demo-ruleForm"
          ><el-row>
            <el-col :span="24">
              <el-form-item label="银行所在区" prop="bankaddr">
                <el-cascader
                  placeholder="请选择银行所在区"
                  v-model="ruleForm.bankaddr"
                  style="width: 100%"
                  :props="regionProps"
                ></el-cascader>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="银行名称" prop="bankname">
                <el-input
                  placeholder="请输入银行名称"
                  v-model="ruleForm.bankname"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="银行卡号" prop="bankcode">
                <el-input
                  placeholder="银行卡号"
                  v-model="ruleForm.bankcode"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-col :span="24" style="text-align: right">
            <el-button type="primary" @click="submitForm">保 存 </el-button>
            <el-button @click="showModelThis = false">取 消</el-button>
          </el-col>
        </el-form>
      </el-row>
    </el-card>
  </el-dialog>
</template>
   <script>
let id = 0;
import asyncRequest from "@/apis/service/client/company";
import { mapGetters } from "vuex";
export default {
  name: "goods",
  props: ["showModel", "id", "title"],
  computed: {
    ...mapGetters(["tablebtnSize", "searchSize", "size"]),
  },
  data() {
    const validatename = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("规格名称不能为空！"));
      } else {
        if (value.lenght < 2 || value.lenght > 12) {
          callback(new Error("规格名称规则为2~12位汉字！"));
        } else {
          if (!isChinese(value)) {
            callback(new Error("规格名称规则为2~12位汉字！"));
          } else if (isEmoticon(value)) {
            callback(new Error("规格名称规则为2~12位汉字！"));
          } else {
            callback();
          }
        }
      }
    };
    const validatecode = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("银行卡号不能为空！"));
      } else {
        if (value.lenght < 8 || value.lenght > 32) {
          callback(
            new Error("银行卡号规则为8~32位数字、字母、数字与字母组合！")
          );
        } else if (!isAlphanumeric(value)) {
          callback(
            new Error("银行卡号规则为8~32位数字、字母、数字与字母组合！")
          );
        } else {
          callback();
        }
      }
    };
    return {
      regionProps: {
        lazy: true,
        lazyLoad: this.getall,
      },
      loading: false,
      showModelThis: this.showModel,
      tableData: [],
      editModal: true,
      editId: 0,
      ruleForm: {
        id: this.id,
        bankname: "北京有限公司",
        bankaddr: [],
        bankcode: "11050162550000000142"
        //"6228481091494940719",
        //"20000048109600041400861",
      },
      rulesThis: this.rules,
      rules: {
        bankname: [
          {
            required: true,
            validator: validatename,
            trigger: "blur",
          },
        ],
        bankcode: [
          {
            required: true,
            validator: validatecode,
            trigger: "blur",
          },
        ],
        bankaddr: [
          {
            required: true,
            type: "array",
            message: "排序不能为空！",
            trigger: "change",
          },
        ],
      },
    };
  },
  methods: {
    closeModel() {
      this.showModelThis = false;
    },
    async initForm() {
      console.log(this.id);
      this.loading = true;
      let res = await asyncRequest.bank({ id: this.id });
      if (res.code === 0 && res.data) {
        this.tableData = res.data;
        // this.tableData.map((v1) => {
        //   v1.addtime = v1.addtime.replaceAll(".000", "");
        //   return v1;
        // });
      } else {
        this.tableData = [];
      }
      this.loading = false;
    },
    openModal(id) {
      this.editModal = true;
      this.editId = id;
    },
    getall(node, resolve) {
      const { level, value } = node;
      this.getList(level, value)
        .then((res) => {
          let list = res;
          list.map((v1) => {
            v1.value =
              v1[
                `${level == 0 ? "province" : level == 1 ? "city" : "area"}_code`
              ];
            v1.label =
              v1[
                `${level == 0 ? "province" : level == 1 ? "city" : "area"}_name`
              ];
            v1.leaf = level >= 2;
            return v1;
          });
          resolve(list);
        })
        .catch((error) => {
          resolve([]);
        });
    },
    getList(level, id) {
      return new Promise((resolve, reject) => {
        let api = "";
        let res = {};
        if (level === 0) {
          api = "pList";
        } else if (level === 1) {
          api = "cList";
        } else if (level === 2) {
          api = "aList";
        }
        let model = {
          code: id,
        };
        if (level === 0) {
          delete model["code"];
        }
        asyncRequest[api](model)
          .then((res) => {
            if (res.code === 0 && res.data) {
              resolve(res.data);
            } else {
              resolve([]);
            }
          })
          .catch((error) => {
            reject(error);
          });
      });
    },
    async submitForm() {
      await this.$refs.ruleForm.validate(async (valid) => {
        if (valid) {
          this.loading = true;
          let rescode = await asyncRequest.getbank({
            bankcode: this.ruleForm.bankcode,
          });
          if (rescode.code === 0) {
            let obj = JSON.parse(JSON.stringify(this.ruleForm));
            obj.bankaddr = obj.bankaddr.join();
            obj.id = this.id;
            let res = await asyncRequest.attrAdd(obj);
            this.loading = false;
            if (res.code === 0) {
              let title = this.id === "add" ? "添加成功" : "修改成功";
              this.$notify.success({
                title,
                message: "",
              });
              // this.showModelThis = false;
              // // 刷新
              // this.$emit("refresh");
            }
          } else {
            console.log(rescode);
          }
        } else {
          // console.log("error submit!!");
          return false;
        }
      });
    },
  },
  watch: {
    showModel: function (val) {
      this.showModelThis = val;
      if (val) {
        this.initForm();
      }
    },
    showModelThis(val) {
      if (!val) {
        this.$emit("cancel");
      }
    },
  },
};
</script>

   <style lang="scss" scoped>
.goods {
  .activeImg {
    display: inline-block;
    width: 100%;
  }
  .img-box {
    img {
      width: 40px;
      height: 40px;
      display: inline-block;
      margin: 0 3px;
      border: 1px solid transparent;
      &.active {
        border: 1px solid red;
      }
      &:hover {
        cursor: pointer;
      }
    }
  }
}
</style>
   