<template>
  <el-row>
    <el-col :span="24">
      <el-form
        ref="feedbackForm"
        :model="feedbackForm"
        :rules="feedbacksThis"
        label-width="130px"
        class="demo-feedbackForm"
      >
        <el-row :gutter="0">
          <el-col :span="23">
            <el-form-item label="公司财务信息" prop="companyNo">
              <el-select
                v-model="feedbackForm.companyNo"
                style="width: 100%"
                placeholder="请选择财务信息"
                @change="chang"
              >
                <el-option
                  v-for="item in options"
                  :key="item.companyNo"
                  :label="item.company_name"
                  :value="item.companyNo"
                  :disabled="item.status == '0'"
                >
                  <span style="float: left">{{ item.company_name }}</span>
                  <span style="float: right; color: #8492a6; font-size: 13px">{{
                    item.bank_name
                  }}</span>
                </el-option>
              </el-select>
            </el-form-item>
            <el-col :span="24" v-if="feedbackForm.companyNo">
              <el-row :gutter="0">
                <el-col :span="12">
                  <el-form-item
                    :size="'mini'"
                    label="单位名称"
                    prop="company_name"
                  >
                    <el-input v-model="feedbackForm.company_name" disabled />
                  </el-form-item> </el-col
                ><el-col :span="12">
                  <el-form-item
                    :size="'mini'"
                    label="纳税人识别号"
                    prop="company_license"
                  >
                    <el-input v-model="feedbackForm.company_license" disabled />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item
                    :size="'mini'"
                    label="银行名称"
                    prop="bank_name"
                  >
                    <el-input v-model="feedbackForm.bank_name" disabled />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item :size="'mini'" label="银行卡号" prop="bankNo">
                    <el-input v-model="feedbackForm.bankNo" disabled />
                  </el-form-item>
                </el-col>
              </el-row>
            </el-col>
          </el-col>
          <el-col :span="23" style="text-align: right">
            <el-button type="primary" @click="submitForm">提 交 </el-button>
          </el-col>
        </el-row>
      </el-form>
    </el-col>
  </el-row>
</template>
<script>
import asyncRequest from "@/apis/service/purchase/orderRecord";
import resToken from "@/mixins/resToken";
export default {
  name: "orderRecord",
  props: ["id", "newTime", "payNo", "companyNo"],
  mixins: [resToken],
  data() {
    return {
      loading: false,
      feedbackForm: {
        id: this.id,
        status: "3",
        companyNo: "",
      },
      options: [],
      feedbacksThis: this.feedbacks,
      feedbacks: {
        companyNo: [
          {
            required: true,
            message: "请选择财务信息",
            trigger: "change",
          },
        ],
      },
    };
  },

  watch: {
    newTime: function (old, val) {
      if (old !== val) {
        this.initForm();
      }
    },
  },
  mounted() {
    this.initForm();
  },
  methods: {
    async initForm() {
      this.loading = true;
      await this.initData();
      console.log(this.payNo);
      this.loading = true;
      this.feedbacksThis = this.feedbacks;
      await this.resetForm();
      this.loading = false;
    },

    async resetForm() {
      // 重置
      await this.$nextTick(() => {
        if (this.$refs.feedbackForm) {
          this.$refs.feedbackForm.resetFields();
          this.$refs.feedbackForm.clearValidate();
          this.feedbackForm = {
            id: this.id,
            status: "3",
            companyNo: "",
          };
        }
      });
    },
    chang(val) {
      let item;
      this.options.forEach((v1) => {
        if (v1.companyNo === val) {
          item = v1;
        }
      });
      this.feedbackForm.company_name = item.company_name; // 企业名称
      this.feedbackForm.company_license = item.company_license; // 纳税人识别号
      this.feedbackForm.bank_name = item.bank_name; //银行名称
      this.feedbackForm.bankNo = item.bankNo; //银行卡号
    },
    async submitForm() {
      await this.$refs.feedbackForm.validate(async (valid) => {
        if (valid) {
          this.loading = true;
          const obj = JSON.parse(JSON.stringify(this.feedbackForm));
          let model = {
            sid: obj.id,
            payNo: this.payNo,
            status: obj.status,
            companyNo: obj.companyNo,
          };
          let res = {};
          res = await asyncRequest.again(model);
          this.loading = false;
          if (res && res.code === 0) {
            const title = "发票信息反馈成功！";
            this.$notify.success({
              title,
              message: "",
            });
            this.showModelThis = false;
            // 刷新
            this.$emit("refreshAll");
          } else if (res && res.code >= 100 && res.code <= 104) {
            await this.logout();
          }else{
            this.$message.warning(res.message);
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    async initData() {
      this.options = [];
      const res = await asyncRequest.companyall({});
      if (res && res.code === 0 && res.data) {
        this.options = res.data;
      } else if (res && res.code >= 100 && res.code <= 104) {
        await this.logout();
      }else{
        this.$message.warning(res.message);
      }
    },
  },
};
</script>

   <style lang="scss" scoped>
.orderRecord {
  .setWidth {
    width: 100% !important;
    // display: flex;
    // display: block !important;
    // .el-input__inner {
    //   display: flex;
    //   width: 1000px !important;
    //   display: block !important;
    // }
  }
}
</style>
