<template>
  <zj-page-container>
    <zj-page-fill>
      <div style="box-sizing: border-box; padding: 20px 20px 0 20px">
        <zj-form-container
          ref="formRef"
          :form-data="formData"
          :form-attributes="{ size: 'mini' }"
        >
          <zj-form-module
            title="补贴申请"
            label-width="160px"
            :form-data="formData"
            :form-items="formItems"
          >
          </zj-form-module>
        </zj-form-container>
      </div>
    </zj-page-fill>
    <div style="text-align: right; box-sizing: border-box; padding: 16px 20px">
      <el-button size="mini" @click="goBack">取消</el-button>
      <el-button
        v-if="['reiterate', 'add', 'edit'].includes(type)"
        size="mini"
        type="primary"
        @click="save"
        >提交</el-button
      >
    </div>
  </zj-page-container>
</template>

<script>
import ImageUpload from "@/components/file-upload";
import {
  supplementDetail,
  supplementSubmit,
  umsSupplementGenerate,
  supplementRegionCodeList,
} from "@/api/subsidyApplication";
import { required } from "@/components/template/rules_verify.js";
export default {
  name: "subsidyApplicationDetail",
  components: {
    ImageUpload,
  },
  data() {
    return {
      formData: {
        activeBigClass: "",
        address: "",
        apId: "",
        billId: "",
        brand: "",
        checkStatus: "",
        cityCode: "",
        cityName: "",
        clientIp: "",
        companyWechatId: "",
        createTime: "",
        districtCode: "",
        districtName: "",
        grantFlag: "",
        id: "",
        invoiceIssueDate: "",
        merOrderId: "",
        newEei: "",
        newElecAppBrandAndModel: "",
        newElecAppCnt: "",
        newInvCode: "",
        newInvNo: "",
        idCardBackPicKey: [],
        idCardFrontPicKey: [],
        newCelecAppInvPicKey: [],
        newElecAppPicKey1: [],
        newElecAppPicKey2: "",
        newElecAppPicKey3: "",
        newElecAppPicKey4: "",
        newElecAppPicKey5: "",
        newOtherFile1Key1: [],
        newOtherFile1Key2: "",
        newOtherFile1Key3: "",
        newOtherFile1Key4: "",
        newOtherFile1Key5: "",
        newTransRecPicKey1: [],
        newTransRecPicKey2: "",
        newTransRecPicKey3: "",
        newTransRecPicKey4: "",
        newTransRecPicKey5: "",
        newTotalPrice: "",
        newTotalPriceExcTax: "",
        orderId: "",
        provinceCode: "",
        provinceName: "",
        reason: "",
        remark: "",
        salesCompCode: "",
        salesCompName: "",
        status: "",
        traceId: "",
        traceMsg: "",
        traceStatus: "",
        transDate: "",
      },
      type: "",
      provinceList: [],
      cityList: [],
      countryList: [],
    };
  },
  computed: {
    formItems() {
      return [
        {
          isShow: true,
          name: "el-input",
          md: 6,
          attributes: {
            disabled: true,
            placeholder: "请输入",
          },
          formItemAttributes: {
            label: "流水号",
            prop: "traceId",
            rules: [],
          },
        },
        {
          isShow: true,
          name: "el-input",
          md: 6,
          attributes: {
            disabled: true,
            placeholder: "请输入",
          },
          formItemAttributes: {
            label: "商户订单号",
            prop: "merOrderId",
            rules: [...required],
          },
        },
        {
          isShow: true,
          name: "slot-component",
          md: 6,
          attributes: {
            disabled: true,
            placeholder: "请输入",
          },
          formItemAttributes: {
            label: "活动大类",
            prop: "activeBigClass",
            rules: [...required],
          },
          render: (h, { props, onInput }) => {
            var { value } = props;
            return (
              <el-input
                value={"家电"}
                disabled={true}
                size="mini"
                placeholder=""
              ></el-input>
            );
          },
        },
        {
          isShow: true,
          name: "el-select",
          md: 6,
          options: this.provinceList,
          attributes: {
            placeholder: "请选择",
            clearable: true,
            filterable: true,
            disabled: ["details"].includes(this.type),
          },
          formItemAttributes: {
            label: "活动地的省编码",
            prop: "provinceCode",
            rules: [...required],
          },
          events: {
            change: (val) => {
              this.formData.provinceName =
                this.provinceList.find((item) => item.value == val)?.label ||
                "";
              this.cityList = [];
              this.countryList = [];
              this.formData.cityCode = "";
              this.formData.cityName = "";
              this.formData.districtCode = "";
              this.formData.districtName = "";
              if (val) {
                supplementRegionCodeList({ provinceCode: val }).then((res) => {
                  this.cityList = res.data.map((item) => ({
                    label: item.cityName,
                    value: item.cityId,
                  }));
                });
              }
            },
          },
        },
        {
          isShow: true,
          name: "el-select",
          md: 6,
          options: this.cityList,
          attributes: {
            placeholder: "请选择",
            clearable: true,
            filterable: true,
            disabled: ["details"].includes(this.type),
          },
          formItemAttributes: {
            label: "活动地的市编码",
            prop: "cityCode",
            rules: [...required],
          },
          events: {
            change: (val) => {
              this.formData.cityName =
                this.cityList.find((item) => item.value == val)?.label || "";
              this.countryList = [];
              this.formData.districtCode = "";
              this.formData.districtName = "";
              if (val) {
                supplementRegionCodeList({ cityCode: val }).then((res) => {
                  this.countryList = res.data.map((item) => ({
                    label: item.countryName,
                    value: item.countryId,
                  }));
                });
              }
            },
          },
        },
        {
          isShow: true,
          name: "el-select",
          md: 6,
          options: this.countryList,
          attributes: {
            placeholder: "请选择",
            clearable: true,
            filterable: true,
            disabled: ["details"].includes(this.type),
          },
          formItemAttributes: {
            label: "活动地区编码",
            prop: "districtCode",
            rules: [...required],
          },
          events: {
            change: (val) => {
              this.formData.districtName =
                this.countryList.find((item) => item.value == val)?.label || "";
            },
          },
        },
        {
          isShow: true,
          name: "el-input",
          md: 12,
          attributes: {
            disabled: true,
            placeholder: "请输入",
          },
          formItemAttributes: {
            label: "详细地址",
            prop: "address",
            rules: [...required],
          },
        },
        {
          isShow: true,
          name: "el-input",
          md: 6,
          attributes: {
            disabled: true,
            placeholder: "请输入",
          },
          formItemAttributes: {
            label: "购买商品数量",
            prop: "newElecAppCnt",
            rules: [...required],
          },
        },
        {
          isShow: true,
          name: "el-input",
          md: 6,
          attributes: {
            disabled: ["details"].includes(this.type),
            placeholder: "请输入",
          },
          formItemAttributes: {
            label: "商品品牌名称",
            prop: "brand",
            rules: [...required],
          },
        },
        {
          isShow: true,
          name: "el-input",
          md: 6,
          attributes: {
            disabled: true,
            placeholder: "请输入",
          },
          formItemAttributes: {
            label: "能效（水效）",
            prop: "newEei",
            rules: [...required],
          },
        },
        {
          isShow: true,
          name: "el-input",
          md: 6,
          attributes: {
            disabled: true,
            placeholder: "请输入",
          },
          formItemAttributes: {
            label: "品牌及型号",
            prop: "newElecAppBrandAndModel",
            rules: [...required],
          },
        },
        {
          isShow: true,
          name: "el-input",
          md: 6,
          attributes: {
            disabled: true,
            placeholder: "请输入",
          },
          formItemAttributes: {
            label: "交易日期",
            prop: "transDate",
          },
        },
        {
          isShow: true,
          name: "el-input",
          md: 6,
          attributes: {
            disabled: ["details"].includes(this.type),
            placeholder: "请输入",
          },
          formItemAttributes: {
            label: "发票代码",
            prop: "newInvCode",
          },
        },
        {
          isShow: true,
          name: "el-input",
          md: 6,
          attributes: {
            disabled: ["details"].includes(this.type),
            placeholder: "请输入",
          },
          formItemAttributes: {
            label: "发票号码",
            prop: "newInvNo",
            rules: [...required],
          },
        },
        {
          isShow: true,
          name: "el-date-picker",
          md: 6,
          attributes: {
            disabled: ["details"].includes(this.type),
            placeholder: "请输入",
            type: "date",
            "value-format": "yyyy-MM-dd",
          },
          formItemAttributes: {
            label: "开票日期",
            prop: "invoiceIssueDate",
            rules: [...required],
          },
        },
        {
          isShow: true,
          name: "el-input",
          md: 6,
          attributes: {
            disabled: ["details"].includes(this.type),
            placeholder: "请输入",
          },
          formItemAttributes: {
            label: "含税发票金额",
            prop: "newTotalPrice",
            rules: [...required],
          },
        },
        {
          isShow: true,
          name: "el-input",
          md: 6,
          attributes: {
            disabled: ["details"].includes(this.type),
            placeholder: "请输入",
          },
          formItemAttributes: {
            label: "不含税发票金额",
            prop: "newTotalPriceExcTax",
            rules: [...required],
          },
        },
        {
          isShow: true,
          name: "el-input",
          md: 6,
          attributes: {
            disabled: true,
            placeholder: "请输入",
          },
          formItemAttributes: {
            label: "销售企业（网点）名称",
            prop: "salesCompName",
            rules: [...required],
          },
        },
        {
          isShow: true,
          name: "el-input",
          md: 6,
          attributes: {
            disabled: true,
            placeholder: "请输入",
          },
          formItemAttributes: {
            label: "销售方纳税人识别号",
            prop: "salesCompCode",
          },
        },
        {
          isShow: true,
          name: "el-input",
          md: 6,
          attributes: {
            disabled: true,
            placeholder: "请输入",
          },
          formItemAttributes: {
            label: "客户端ip地址",
            prop: "clientIp",
            rules: [...required],
          },
        },
        {
          isShow: true,
          name: "el-input",
          md: 24,
          attributes: {
            disabled: ["details"].includes(this.type),
            placeholder: "请输入",
            type: "textarea",
            rows: 3,
          },
          formItemAttributes: {
            label: "备注",
            prop: "remark",
          },
        },
        {
          md: 8,
          isShow: true,
          name: "slot-component",
          formItemAttributes: {
            label: "证件图片头像面",
            prop: "idCardFrontPicKey",
            rules: [],
          },
          render: (h, { props, onInput }) => {
            var { value } = props;
            return (
              <div>
                <ImageUpload
                  fileType={["image"]}
                  fileList={this.formData.idCardFrontPicKey}
                  uid="imgSrc01_drawing_images"
                  limit={1}
                  isEdit={!["details"].includes(this.type)}
                  maxSize={1}
                />
                <div>支持jpg/png格式</div>
              </div>
            );
          },
        },
        {
          md: 8,
          isShow: true,
          name: "slot-component",
          formItemAttributes: {
            label: "证件图片国徽面",
            prop: "idCardBackPicKey",
            rules: [],
          },
          render: (h, { props, onInput }) => {
            var { value } = props;
            return (
              <div>
                <ImageUpload
                  fileType={["image"]}
                  fileList={this.formData.idCardBackPicKey}
                  uid="imgSrc02_drawing_images"
                  limit={1}
                  isEdit={!["details"].includes(this.type)}
                  maxSize={1}
                />
                <div>支持jpg/png格式</div>
              </div>
            );
          },
        },
        {
          md: 8,
          isShow: true,
          name: "slot-component",
          formItemAttributes: {
            label: "发票图片",
            prop: "newCelecAppInvPicKey",
            rules: [...required],
          },
          render: (h, { props, onInput }) => {
            var { value } = props;
            return (
              <div>
                <ImageUpload
                  fileType={["image"]}
                  fileList={this.formData.newCelecAppInvPicKey}
                  uid="imgSrc03_drawing_images"
                  limit={1}
                  isEdit={!["details"].includes(this.type)}
                  maxSize={1}
                />
                <div>支持jpg/png格式</div>
              </div>
            );
          },
        },
        {
          md: 24,
          isShow: true,
          name: "slot-component",
          formItemAttributes: {
            label: "购买商品照片",
            prop: "newElecAppPicKey1",
            rules: [...required],
          },
          render: (h, { props, onInput }) => {
            var { value } = props;
            return (
              <div>
                <ImageUpload
                  fileType={["image"]}
                  fileList={this.formData.newElecAppPicKey1}
                  uid="imgSrc04_drawing_images"
                  limit={5}
                  isEdit={!["details"].includes(this.type)}
                  maxSize={1}
                />
                <div>
                  支持jpg/png格式，最多5张；需含外包装，产品主体，能效标识，SN码等；
                </div>
              </div>
            );
          },
        },
        {
          md: 24,
          isShow: true,
          name: "slot-component",
          formItemAttributes: {
            label: "支付购买凭证图片",
            prop: "newTransRecPicKey1",
            rules: [...required],
          },
          render: (h, { props, onInput }) => {
            var { value } = props;
            return (
              <div>
                <ImageUpload
                  fileType={["image"]}
                  fileList={this.formData.newTransRecPicKey1}
                  uid="imgSrc05_drawing_images"
                  limit={5}
                  isEdit={!["details"].includes(this.type)}
                  maxSize={1}
                />
                <div>
                  支持jpg/png格式，最多5张；无POS小票的，可提供消费订单截图；
                </div>
              </div>
            );
          },
        },
        {
          md: 24,
          isShow: true,
          name: "slot-component",
          formItemAttributes: {
            label: "其他图片",
            prop: "newOtherFile1Key1",
          },
          render: (h, { props, onInput }) => {
            var { value } = props;
            return (
              <div>
                <ImageUpload
                  fileType={["image"]}
                  fileList={this.formData.newOtherFile1Key1}
                  uid="imgSrc06_drawing_images"
                  limit={5}
                  isEdit={!["details"].includes(this.type)}
                  maxSize={1}
                />
                <div>支持jpg/png格式，最多5张；</div>
              </div>
            );
          },
        },
      ];
    },
  },
  created() {
    var { id, orderId, type } = this.$route.query;
    this.type = type;
    if (id) {
      this.getzhxq(id);
    } else if (orderId) {
      umsSupplementGenerate({
        orderId: orderId,
      }).then((res) => {
        this.getzhxq(res.data);
      });
    }
    supplementRegionCodeList().then((res) => {
      this.provinceList = res.data.map((item) => ({
        label: item.provinceName,
        value: item.provinceId,
      }));
    });
  },
  methods: {
    goBack() {
      window.close();
    },
    getzhxq(id) {
      supplementDetail({
        id: id,
      }).then((res) => {
        if (res.data.provinceCode) {
          supplementRegionCodeList({
            provinceCode: res.data.provinceCode,
          }).then((res) => {
            this.cityList = res.data.map((item) => ({
              label: item.cityName,
              value: item.cityId,
            }));
          });
        }
        if (res.data.cityCode) {
          supplementRegionCodeList({ cityCode: res.data.cityCode }).then(
            (res) => {
              this.countryList = res.data.map((item) => ({
                label: item.countryName,
                value: item.countryId,
              }));
            }
          );
        }
        this.formData = {
          ...res.data,
          idCardBackPicKey: res.data.idCardBackPicKey
            ? [{ url: res.data.idCardBackPicKey }]
            : [],
          idCardFrontPicKey: res.data.idCardFrontPicKey
            ? [{ url: res.data.idCardFrontPicKey }]
            : [],
          newCelecAppInvPicKey: res.data.newCelecAppInvPicKey
            ? [{ url: res.data.newCelecAppInvPicKey }]
            : [],
          newElecAppPicKey1: (() => {
            let imgs = [];
            for (let i = 1; i <= 5; i++) {
              if (res.data[`newElecAppPicKey${i}`]) {
                imgs.push({ url: res.data[`newElecAppPicKey${i}`] });
              }
            }
            return imgs;
          })(),
          newOtherFile1Key1: (() => {
            let imgs = [];
            for (let i = 1; i <= 5; i++) {
              if (res.data[`newOtherFile1Key${i}`]) {
                imgs.push({ url: res.data[`newOtherFile1Key${i}`] });
              }
            }
            return imgs;
          })(),
          newTransRecPicKey1: (() => {
            let imgs = [];
            for (let i = 1; i <= 5; i++) {
              if (res.data[`newTransRecPicKey${i}`]) {
                imgs.push({ url: res.data[`newTransRecPicKey${i}`] });
              }
            }
            return imgs;
          })(),
        };
        if (this.type === "reiterate") {
          delete this.formData.id;
        }
      });
    },
    save() {
      console.log({
        ...this.formData,
        idCardBackPicKey:
          this.formData.idCardBackPicKey &&
          this.formData.idCardBackPicKey.length
            ? this.formData.idCardBackPicKey?.[0]?.url
            : "",
        idCardFrontPicKey:
          this.formData.idCardFrontPicKey &&
          this.formData.idCardFrontPicKey.length
            ? this.formData.idCardFrontPicKey?.[0]?.url
            : "",
        newCelecAppInvPicKey:
          this.formData.newCelecAppInvPicKey &&
          this.formData.newCelecAppInvPicKey.length
            ? this.formData.newCelecAppInvPicKey?.[0]?.url
            : "",
        ...(() => {
          let imgs = {};
          for (let i = 1; i <= 5; i++) {
            if (this.formData.newElecAppPicKey1[i - 1]) {
              imgs[`newElecAppPicKey${i}`] =
                this.formData.newElecAppPicKey1[i - 1]?.url || "";
            } else {
              imgs[`newElecAppPicKey${i}`] = "";
            }
            if (this.formData.newOtherFile1Key1[i - 1]) {
              imgs[`newOtherFile1Key${i}`] =
                this.formData.newOtherFile1Key1[i - 1]?.url || "";
            } else {
              imgs[`newOtherFile1Key${i}`] = "";
            }
            if (this.formData.newTransRecPicKey1[i - 1]) {
              imgs[`newTransRecPicKey${i}`] =
                this.formData.newTransRecPicKey1[i - 1]?.url || "";
            } else {
              imgs[`newTransRecPicKey${i}`] = "";
            }
          }
          return imgs;
        })(),
      });
      this.$refs.formRef.validate((valid, invalidFields, errLabels) => {
        if (valid) {
          supplementSubmit({
            ...this.formData,
            idCardBackPicKey:
              this.formData.idCardBackPicKey &&
              this.formData.idCardBackPicKey.length
                ? this.formData.idCardBackPicKey?.[0]?.url
                : "",
            idCardFrontPicKey:
              this.formData.idCardFrontPicKey &&
              this.formData.idCardFrontPicKey.length
                ? this.formData.idCardFrontPicKey?.[0]?.url
                : "",
            newCelecAppInvPicKey:
              this.formData.newCelecAppInvPicKey &&
              this.formData.newCelecAppInvPicKey.length
                ? this.formData.newCelecAppInvPicKey?.[0]?.url
                : "",
            ...(() => {
              let imgs = {};
              for (let i = 1; i <= 5; i++) {
                if (this.formData.newElecAppPicKey1[i - 1]) {
                  imgs[`newElecAppPicKey${i}`] =
                    this.formData.newElecAppPicKey1[i - 1]?.url || "";
                } else {
                  imgs[`newElecAppPicKey${i}`] = "";
                }
                if (this.formData.newOtherFile1Key1[i - 1]) {
                  imgs[`newOtherFile1Key${i}`] =
                    this.formData.newOtherFile1Key1[i - 1]?.url || "";
                } else {
                  imgs[`newOtherFile1Key${i}`] = "";
                }
                if (this.formData.newTransRecPicKey1[i - 1]) {
                  imgs[`newTransRecPicKey${i}`] =
                    this.formData.newTransRecPicKey1[i - 1]?.url || "";
                } else {
                  imgs[`newTransRecPicKey${i}`] = "";
                }
              }
              return imgs;
            })(),
          }).then((res) => {
            this.$message({
              type: "success",
              message: "提交成功",
            });
            this.goBack();
          });
        }
      });
    },
  },
};
</script>

<style scoped lang="scss"></style>
