<template>
  <ele-modal
    custom-class="ele-dialog-form long-dialog-form"
    :centered="true"
    :append-to-body="true"
    :visible.sync="visible"
    :close-on-click-modal="false"
    width="60%"
    @close="cancel"
    title="修改商品价格"
    v-if="visible"
    :maxable="true"
    :resizable="true"
  >
    <el-form
      label-width="120px"
      ref="form"
      :model="form"
      :rules="rules"
      class="el-form-box"
    >
      <el-row>
        <el-col :span="6">
          <el-form-item label="价格分类" prop="priceType">
            <DictSelection
              dictName="商品价格类型"
              clearable
              v-model="form.priceType"
              disabled
            >
            </DictSelection>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="含税单价" prop="unitPrice">
            <el-input
              placeholder="请输入"
              v-model="form.unitPrice"
              maxlength="50"
              type="number"
              @input="changeCount"
            >
              <template slot="append">元</template>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="税率" prop="taxRate">
            <el-input
              placeholder="请输入"
              v-model="form.taxRate"
              maxlength="50"
              type="number"
              @input="changeCount"
              :min="0"
            >
              <template slot="append">%</template>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="不含税单价" prop="excludeTaxPrice">
            <el-input
              placeholder="请输入"
              v-model="form.excludeTaxPrice"
              maxlength="50"
              disabled
            >
              <template slot="append">元</template>
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template slot="footer">
      <el-button type="primary" @click="save" v-click-once>提交</el-button>
      <el-button @click="cancel">返回</el-button>
    </template>
  </ele-modal>
</template>

<script>
  import { copyObj } from '@/utils/util';
  import { getGoodsPriceById, updateGoodsPrice } from '@/api/goodsManage/index';
  let formDef = {
    id: '',
    priceType: '',
    unitPrice: 0,
    taxRate: 0,
    excludeTaxPrice: 0
  };
  export default {
    data() {
      return {
        title: '',
        visible: false,
        type: '修改商品价格',
        form: copyObj(formDef),
        type: 1, // 1为商品信息 2为商品价格
        rules: {
          priceType: [
            { required: true, message: '请选择价格分类', trigger: 'change' }
          ],
          unitPrice: [
            { required: true, message: '请输入含税单价', trigger: 'change' }
          ],
          taxRate: [
            { required: true, message: '请输入税率', trigger: 'change' }
          ]
        }
      };
    },
    methods: {
      async open(row) {
        let res = await getGoodsPriceById(row.id);
        this.form = res || {};
        this.visible = true;
      },

      changeCount() {
        let row = this.form;
        if (row.unitPrice == null || row.taxRate == null) return;
        let excludeTaxPrice = (
          Number(row.unitPrice) /
          (1 + Number(row.taxRate) / 100)
        ).toFixed(2);
        this.form.excludeTaxPrice = excludeTaxPrice || 0;
      },
      save() {
        let commitDatasource = this.form;

        this.$refs.form.validate((valid) => {
          if (valid) {
            updateGoodsPrice(commitDatasource).then((res) => {
              if (res?.code === '0') {
                this.$message.success('操作成功');
                this.cancel();
                this.$emit('done');
              }
            });
          }
        });
      },
      cancel() {
        this.$nextTick(() => {
          // 关闭后，销毁所有的表单数据
          this.form = copyObj(formDef);
          this.visible = false;
        });
      }
    }
  };
</script>
<style lang="scss" scoped></style>
