<template>
  <div class="app-container">
    <el-tabs v-model="activeName">
      <el-tab-pane label="Excel设置" name="second">
        <el-form :model="form" ref="form" :inline="true" :rules="rules" label-width="150px">
          <el-form-item class="el-form-item__label" label="单据编号" prop="receiptNumber">
            <el-input
              v-model="form.receiptNumber"
              placeholder="单据编号"
              size="small"
              style="width: 130px;font-size: 10px"
              @blur="checkInput"
            />
          </el-form-item>
          <el-form-item label="客户名称/编码" prop="customerName" style="margin-left: -10px;">
            <el-input
              v-model="form.customerName"
              placeholder="客户名称/编码"
              size="small"
              style="width: 130px;font-size: 10px"
              @blur="checkInput"
            />
          </el-form-item>
          <el-form-item label="客户税号" prop="customerTaxNumber">
            <el-input
              v-model="form.customerTaxNumber"
              placeholder="客户税号"
              size="small"
              style="width: 130px;font-size: 10px"
              @blur="checkInput"
            />
          </el-form-item>
          <el-form-item label="客户地址" prop="customerAddress">
            <el-input
              v-model="form.customerAddress"
              placeholder="客户地址"
              size="small"
              style="width: 130px;font-size: 10px"
              @blur="checkInput"
            />
          </el-form-item>
          <el-form-item label="客户电话" prop="customerPhone">
            <el-input
              v-model="form.customerPhone"
              placeholder="客户电话"
              size="small"
              style="width: 130px;font-size: 10px"
              @blur="checkInput"
            />
          </el-form-item>
          <el-form-item label="开户银行" prop="bankName">
            <el-input
              v-model="form.bankName"
              placeholder="开户银行"
              size="small"
              style="width: 130px;font-size: 10px"
              @blur="checkInput"
            />
          </el-form-item>
          <el-form-item label="银行账号" prop="bankNumber">
            <el-input
              v-model="form.bankNumber"
              placeholder="银行账号"
              size="small"
              style="width: 130px;font-size: 10px"
              @blur="checkInput"
            />
          </el-form-item>
          <el-form-item label="手机号" prop="phone">
            <el-input
              v-model="form.phone"
              placeholder="手机号"
              size="small"
              style="width: 130px;font-size: 10px"
              @blur="checkInput"
            />
          </el-form-item>
          <el-form-item label="邮箱" prop="email">
            <el-input
              v-model="form.email"
              placeholder="邮箱"
              size="small"
              style="width: 130px;font-size: 10px"
              @blur="checkInput"
            />
          </el-form-item>
          <el-form-item label="备注" prop="remark">
            <el-input
              v-model="form.remark"
              placeholder="备注"
              size="small"
              style="width: 130px;font-size: 10px"
              @blur="checkInput"
            />
          </el-form-item>
          <el-form-item label="商品名称/编码" prop="productName">
            <el-input
              v-model="form.productName"
              placeholder="商品名称/编码"
              size="small"
              style="width: 130px;font-size: 10px"
              @blur="checkInput"
            />
          </el-form-item>
          <el-form-item label="规格型号" prop="specification">
            <el-input
              v-model="form.specification"
              placeholder="规格型号"
              size="small"
              style="width: 130px;font-size: 10px"
              @blur="checkInput"
            />
          </el-form-item>
          <el-form-item label="单位" prop="unit">
            <el-input
              v-model="form.unit"
              placeholder="单位"
              size="small"
              style="width: 130px;font-size: 10px"
              @blur="checkInput"
            />
          </el-form-item>
          <el-form-item label="单价" prop="price">
            <el-input
              v-model="form.price"
              placeholder="单价"
              size="small"
              style="width: 130px;font-size: 10px"
              @blur="checkInput"
            />
          </el-form-item>
          <el-form-item label="数量" prop="num">
            <el-input
              v-model="form.num"
              placeholder="数量"
              size="small"
              style="width: 130px;font-size: 10px"
              @blur="checkInput"
            />
          </el-form-item>
          <el-form-item label="金额" prop="taxamt">
            <el-input
              v-model="form.taxamt"
              placeholder="金额"
              size="small"
              style="width: 130px;font-size: 10px"
              @blur="checkInput"
            />
          </el-form-item>
          <el-form-item label="税率" prop="taxrate">
            <el-input
              v-model="form.taxrate"
              placeholder="税率"
              size="small"
              style="width: 130px;font-size: 10px"
              @blur="checkInput"
            />
          </el-form-item>
          <el-form-item label="税额" prop="tax">
            <el-input
              v-model="form.tax"
              placeholder="税额"
              size="small"
              style="width: 130px;font-size: 10px"
              @blur="checkInput"
            />
          </el-form-item>
          <el-form-item label="折扣" prop="discount">
            <el-input
              v-model="form.discount"
              placeholder="折扣"
              size="small"
              style="width: 130px;font-size: 10px"
              @blur="checkInput"
            />
          </el-form-item>
          <el-form-item label="扣除额" prop="deduction">
            <el-input
              v-model="form.deduction"
              placeholder="扣除额"
              size="small"
              style="width: 130px;font-size: 10px"
              @blur="checkInput"
            />
          </el-form-item>
          <el-form-item label="含税标识" prop="signboard">
            <el-select v-model="form.signboard" placeholder="含税标识" size="small" style="width: 130px;font-size: 10px"
                       default-value="1">
              <el-option
                v-for="dict in dict.type.signboard"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="零税率标识" prop="zeroTaxRate">
            <el-input
              v-model="form.zeroTaxRate"
              placeholder="零税率标识"
              size="small"
              style="width: 130px;font-size: 10px"
              @blur="checkInput"
            />
          </el-form-item>
          <el-form-item label="编码简称" prop="encodingName">
            <el-input
              v-model="form.encodingName"
              placeholder="编码简称"
              size="small"
              style="width: 130px;font-size: 10px"
              @blur="checkInput"
            />
          </el-form-item>
          <el-form-item label="编码版本号" prop="encodingVersion">
            <el-input
              v-model="form.encodingVersion"
              placeholder="编码版本号"
              size="small"
              style="width: 130px;font-size: 10px"
              @blur="checkInput"
            />
          </el-form-item>
          <el-form-item label="优惠政策类型" prop="discountsType">
            <el-input
              v-model="form.discountsType"
              placeholder="优惠政策类型"
              size="small"
              style="width: 130px;font-size: 10px"
              @blur="checkInput"
            />
          </el-form-item>
          <el-form-item label="税收分类编码" prop="taxClassificationCode">
            <el-input
              v-model="form.taxClassificationCode"
              placeholder="税收分类编码"
              size="small"
              style="width: 130px;font-size: 10px"
              @blur="checkInput"
            />
          </el-form-item>
          <el-form-item label="是否享受优惠政策" prop="isornotDiscounts">
            <el-input
              v-model="form.isornotDiscounts"
              placeholder="是否享受优惠政策"
              size="small"
              style="width: 130px;font-size: 10px"
              @blur="checkInput"
            />
          </el-form-item>
          <br>
          <el-form-item style="margin-left: 1000px">
            <el-button type="primary" @click="submitForm">保 存</el-button>
            <el-button @click="cancel">重 置</el-button>
          </el-form-item>
        </el-form>
      </el-tab-pane>
      <el-tab-pane label="参数配置" name="first">
        <div align="center" style="color: #00afff">
          <div style="font-size: 25px">
            是否启用参数配置
            <el-radio v-model="radio1" label="1" border>禁用</el-radio>
            <el-radio v-model="radio1" label="2" border>开启</el-radio>
          </div>
        </div>
        <el-card shadow="always" style="margin-top: 10px">
          <div align="center">
            <el-divider class="divider" direction="vertical"></el-divider>
            <span class="spacer">商品编码</span>
            <el-radio v-model="radio2" label="1" border :disabled="radio1 === '1'">关闭</el-radio>
            <el-radio v-model="radio2" label="2" border :disabled="radio1 === '1'">开启</el-radio>
            <el-divider class="divider" direction="vertical"></el-divider>
            <span class="spacer">商品名称</span>
            <el-radio v-model="radio3" label="1" border :disabled="radio1 === '1' || radio2 === '2'">关闭</el-radio>
            <el-radio v-model="radio3" label="2" border :disabled="radio1 === '1' || radio2 === '2'">开启</el-radio>
          </div>
        </el-card>
        <el-card shadow="always" style="margin-top: 20px">
          <div align="center">
            <el-divider class="divider" direction="vertical"></el-divider>
            <span class="spacer">规格型号</span>
            <el-radio v-model="radio4" label="1" border :disabled="radio1 === '1' || radio2 === '2'">关闭</el-radio>
            <el-radio v-model="radio4" label="2" border :disabled="radio1 === '1' || radio2 === '2'">开启</el-radio>
            <el-divider class="divider" direction="vertical"></el-divider>
            <span class="spacer">计量单位</span>
            <el-radio v-model="radio5" label="1" border :disabled="radio1 === '1' || radio2 === '2'">关闭</el-radio>
            <el-radio v-model="radio5" label="2" border :disabled="radio1 === '1' || radio2 === '2'">开启</el-radio>
          </div>
        </el-card>
        <div align="center" style="margin-top: 30px">
          <el-row>
            <el-button type="primary" @click="">确 定</el-button>
          </el-row>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import {oneExportmanage, addExportmanage, updateExportmanage} from "@/api/platform/exportsetting";

export default {
  name: "Exportmanage",
  dicts: ['signboard'],
  data() {
    return {
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 导入设置表格数据
      exportmanageList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        receiptNumber: null,
        customerName: null,
        customerTaxNumber: null,
        customerAddress: null,
        customerPhone: null,
        bankName: null,
        bankNumber: null,
        phone: null,
        email: null,
        remark: null,
        productName: null,
        specification: null,
        unit: null,
        price: null,
        num: null,
        taxamt: null,
        taxrate: null,
        tax: null,
        discount: null,
        deduction: null,
        signboard: null,
        zeroTaxRate: null,
        encodingName: null,
        encodingVersion: null,
        discountsType: null,
        taxClassificationCode: null,
        isornotDiscounts: null,
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        companyName: [
          {required: true, message: "企业名称不能为空", trigger: "blur"}
        ],
        receiptNumber: [
          {required: true, message: "单据编号不能为空", trigger: "blur"}
        ],
        customerName: [
          {required: true, message: "客户名称/编码不能为空", trigger: "blur"}
        ],
        productName: [
          {required: true, message: "商品名称/编码不能为空", trigger: "blur"}
        ],
        price: [
          {required: true, message: "单价不能为空", trigger: "blur"}
        ],
        num: [
          {required: true, message: "数量不能为空", trigger: "blur"}
        ],
        taxamt: [
          {required: true, message: "金额不能为空", trigger: "blur"}
        ],
        taxrate: [
          {required: true, message: "税率不能为空", trigger: "blur"}
        ],
      },
      // 任务栏切换
      activeName: 'second',
      // 启用禁用
      radio1: '1',
      radio2: '1',
      radio3: '1',
      radio4: '1',
      radio5: '1',
      //校验数组
      letterList: []
    };
  },
  watch: {
    radio1(newVal) {
      if (newVal === '2') {
        this.radio2 = '2';
      }else if (newVal === '1'){
        this.radio2 = '1';
        this.radio3 = '1';
        this.radio4 = '1';
        this.radio5 = '1';
      }
    },
    radio2(newVal){
      if (newVal === '2') {
        this.radio3 = '1';
        this.radio4 = '1';
        this.radio5 = '1';
      }
    }
  },
  created() {
    this.getList();
    this.form.signboard = "1";
  },
  methods: {
    /** 查询导入设置列表 */
    getList() {
      this.loading = true;
      oneExportmanage().then(response => {
        if (response.data != null) {
          this.form = response.data;
        }
        this.loading = false;
      });
    },
    //字母校验
    checkInput() {
      const regex = /^[A-Z]$/;
      if (!regex.test(this.form.customerTaxNumber)) {
        this.$message({
          message: '请输入Excel列字母A-Z',
          type: 'warning'
        });
        this.form.customerTaxNumber = '';
      }else if (!regex.test(this.form.receiptNumber)){
        this.$message({
          message: '请输入Excel列字母A-Z',
          type: 'warning'
        });
        this.form.receiptNumber = '';
      }else if (!regex.test(this.form.customerName)){
        this.$message({
          message: '请输入Excel列字母A-Z',
          type: 'warning'
        });
        this.form.customerName = '';
      }else if (!regex.test(this.form.customerAddress)){
        this.$message({
          message: '请输入Excel列字母A-Z',
          type: 'warning'
        });
        this.form.customerAddress = '';
      }else if (!regex.test(this.form.customerPhone)){
        this.$message({
          message: '请输入Excel列字母A-Z',
          type: 'warning'
        });
        this.form.customerPhone = '';
      }else if (!regex.test(this.form.bankName)){
        this.$message({
          message: '请输入Excel列字母A-Z',
          type: 'warning'
        });
        this.form.bankName = '';
      }else if (!regex.test(this.form.bankNumber)){
        this.$message({
          message: '请输入Excel列字母A-Z',
          type: 'warning'
        });
        this.form.bankNumber = '';
      }else if (!regex.test(this.form.phone)){
        this.$message({
          message: '请输入Excel列字母A-Z',
          type: 'warning'
        });
        this.form.phone = '';
      }else if (!regex.test(this.form.email)){
        this.$message({
          message: '请输入Excel列字母A-Z',
          type: 'warning'
        });
        this.form.email = '';
      }else if (!regex.test(this.form.remark)){
        this.$message({
          message: '请输入Excel列字母A-Z',
          type: 'warning'
        });
        this.form.remark = '';
      }else if (!regex.test(this.form.productName)){
        this.$message({
          message: '请输入Excel列字母A-Z',
          type: 'warning'
        });
        this.form.productName = '';
      }else if (!regex.test(this.form.specification)){
        this.$message({
          message: '请输入Excel列字母A-Z',
          type: 'warning'
        });
        this.form.specification = '';
      }else if (!regex.test(this.form.unit)){
        this.$message({
          message: '请输入Excel列字母A-Z',
          type: 'warning'
        });
        this.form.unit= '';
      }else if (!regex.test(this.form.price)){
        this.$message({
          message: '请输入Excel列字母A-Z',
          type: 'warning'
        });
        this.form.price = '';
      }else if (!regex.test(this.form.num)){
        this.$message({
          message: '请输入Excel列字母A-Z',
          type: 'warning'
        });
        this.form.num = '';
      }else if (!regex.test(this.form.taxamt)){
        this.$message({
          message: '请输入Excel列字母A-Z',
          type: 'warning'
        });
        this.form.taxamt = '';
      }else if (!regex.test(this.form.taxrate)){
        this.$message({
          message: '请输入Excel列字母A-Z',
          type: 'warning'
        });
        this.form.taxrate = '';
      }else if (!regex.test(this.form.tax)){
        this.$message({
          message: '请输入Excel列字母A-Z',
          type: 'warning'
        });
        this.form.tax = '';
      }else if (!regex.test(this.form.discount)){
        this.$message({
          message: '请输入Excel列字母A-Z',
          type: 'warning'
        });
        this.form.discount = '';
      }else if (!regex.test(this.form.deduction)){
        this.$message({
          message: '请输入Excel列字母A-Z',
          type: 'warning'
        });
        this.form.deduction = '';
      }else if (!regex.test(this.form.zeroTaxRate)){
        this.$message({
          message: '请输入Excel列字母A-Z',
          type: 'warning'
        });
        this.form.zeroTaxRate = '';
      }else if (!regex.test(this.form.encodingName)){
        this.$message({
          message: '请输入Excel列字母A-Z',
          type: 'warning'
        });
        this.form.encodingName = '';
      }else if (!regex.test(this.form.encodingVersion)){
        this.$message({
          message: '请输入Excel列字母A-Z',
          type: 'warning'
        });
        this.form.encodingVersion = '';
      }else if (!regex.test(this.form.taxClassificationCode)){
        this.$message({
          message: '请输入Excel列字母A-Z',
          type: 'warning'
        });
        this.form.taxClassificationCode = '';
      }else if (!regex.test(this.form.isornotDiscounts)){
        this.$message({
          message: '请输入Excel列字母A-Z',
          type: 'warning'
        });
        this.form.isornotDiscounts = '';
      }
    },
    checkInputAll() {
      this.validateLetter(this.form.receiptNumber);
      this.validateLetter(this.form.customerName);
      this.validateLetter(this.form.customerTaxNumber);
      this.validateLetter(this.form.customerAddress);
      this.validateLetter(this.form.customerPhone);
      this.validateLetter(this.form.bankName);
      this.validateLetter(this.form.bankName);
      this.validateLetter(this.form.phone);
      this.validateLetter(this.form.email);
      this.validateLetter(this.form.remark);
      this.validateLetter(this.form.productName);
      this.validateLetter(this.form.specification);
      this.validateLetter(this.form.unit);
      this.validateLetter(this.form.price);
      this.validateLetter(this.form.num);
      this.validateLetter(this.form.taxamt);
      this.validateLetter(this.form.taxrate);
      this.validateLetter(this.form.tax);
      this.validateLetter(this.form.discount);
      this.validateLetter(this.form.deduction);
      this.validateLetter(this.form.zeroTaxRate);
      this.validateLetter(this.form.encodingName);
      this.validateLetter(this.form.encodingVersion);
      this.validateLetter(this.form.discountsType);
      this.validateLetter(this.form.taxClassificationCode);
      this.validateLetter(this.form.isornotDiscounts);
    },
    validateLetter(value) {
      if (/^[A-Z]$/.test(value)) {
        if (this.letterList.includes(value)) {
          // 输入重复字母，提示用户重新输入
          this.$message.warning('输入值重复！');
        } else {
          // 将合法的字母加入字母列表
          this.letterList.push(value);
        }
      } else {
        // 输入非字母，提示用户重新输入
        this.$message.warning('请输入Excel列字母A-Z');
      }
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        companyName: null,
        receiptNumber: null,
        customerName: null,
        customerTaxNumber: null,
        customerAddress: null,
        customerPhone: null,
        bankName: null,
        bankNumber: null,
        phone: null,
        email: null,
        remark: null,
        productName: null,
        specification: null,
        unit: null,
        price: null,
        num: null,
        taxamt: null,
        taxrate: null,
        tax: null,
        discount: null,
        deduction: null,
        signboard: null,
        zeroTaxRate: null,
        encodingName: null,
        encodingVersion: null,
        discountsType: null,
        taxClassificationCode: null,
        isornotDiscounts: null,
        source: null,
        createBy: null,
        createTime: null,
        updateBy: null,
        updateTime: null
      };
      this.resetForm("form");
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.id != null) {
            updateExportmanage(this.form).then(response => {
              this.$modal.msgSuccess("保存成功");
              this.open = false;
              this.getList();
            });
          } else {
            addExportmanage(this.form).then(response => {
              this.$modal.msgSuccess("保存成功");
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },
  }
};
</script>
<style>
.spacer {
  padding-right: 100px;
}

.divider {
  border: 2px solid #00afff; /* 设置分割线为2像素宽度的蓝色实线 */
}

.el-form-item__label {
  white-space: nowrap;
}
</style>
