<template>
  <el-dialog :visible="innerVisible" :title="title" center :close-on-click-modal="false" @close="handleClose">
    <el-form ref="ruleForm" label-width="110px" size="mini" :rules="rules" :model="ruleForm">
      <el-form-item label="服务分类" prop="service_cat">
        <search-sort ref="sort" :value="service_cat" size="mini" placeholder="服务分类" @handleChange="handleCategoryChange" />
      </el-form-item>

      <el-form-item label="单价" prop="price">
        <digital-input
          :values="ruleForm.price"
          :placeholder="'单价'"
          :min="0"
          :max="100000000000"
          :position="'right'"
          :precision="2"
          :size="'mini'"
          :controls="false"
          :append="'元'"
          @reschange="number_change($event, 'price')"
        />
      </el-form-item>
      
      <el-form-item label="单位" prop="unit">
        <el-input v-model="ruleForm.unit" placeholder="单位" />
      </el-form-item>

      <el-form-item label="数量" prop="num">
        <digital-input
          :values="ruleForm.num"
          :placeholder="'数量'"
          :min="0"
          :max="100000000000"
          :position="'right'"
          :precision="0"
          :size="'mini'"
          :controls="false"
          :append="''"
          @reschange="number_change($event, 'num')"
        />
      </el-form-item>

      <el-form-item label="非税报价" prop="pay_fee">
        <digital-input
          :values="ruleForm.pay_fee"
          :placeholder="'非税报价'"
          :min="0"
          :max="100000000000"
          :position="'right'"
          :precision="2"
          :size="'mini'"
          :controls="false"
          :append="'元'"
          @reschange="number_change($event, 'pay_fee')"
        />
      </el-form-item>

       <el-form-item label="税率" prop="tax">
        <digital-input
          :values="ruleForm.tax"
          :placeholder="'税率'"
          :min="0"
          :max="100000000000"
          :position="'right'"
          :precision="0"
          :size="'mini'"
          :controls="false"
          :append="'%'"
          @reschange="number_change($event, 'tax')"
        />
      </el-form-item>

      <el-form-item label="税额" prop="tax_fee">
        <digital-input
          :values="ruleForm.tax_fee"
          :placeholder="'税额'"
          :min="0"
          :max="100000000000"
          :position="'right'"
          :precision="2"
          :size="'mini'"
          :controls="false"
          :append="'元'"
          @reschange="number_change($event, 'tax_fee')"
        />
      </el-form-item>

      <el-form-item label="含税金额" prop="total_fee">
        <digital-input
          :values="ruleForm.total_fee"
          :placeholder="'含税金额'"
          :min="0"
          :max="100000000000"
          :position="'right'"
          :precision="2"
          :size="'mini'"
          :controls="false"
          :append="'元'"
          @reschange="number_change($event, 'total_fee')"
        />
      </el-form-item>

      <el-form-item label="备注" prop="remark">
        <el-input type="textarea" v-model="ruleForm.remark" />
      </el-form-item>

      <el-form-item class="flex-end">
        <el-button :loading="loading" type="primary" size="mini" @click="onSave">保存</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script>
import { ModalTypes } from "./_template"
import asyncRequest from "@/apis/service/customerService/workbench";
import { accMul, add_sum } from '../../../utils/validate';

export default {
  props:['visible','sitem', 'type', "storeId"],
  computed:{
    innerVisible:{
      get(){
        return this.visible
      },
      set(newVal){
        this.$emit('update:visible', newVal)
      }
    },
    title(){
      console.log(this.type)
      const baseTitle = '预算函'
      const prefix = this.type === ModalTypes.copy ? '复制' : '编辑'
      return `${prefix}${baseTitle}`
    }
  },
  watch:{
    visible(){
      if(!this.visible) return
      this.$nextTick(() => this.initForm())
    }
  },

  data(){
    return {
      ruleForm:{},
      service_cat:[],
      loading:false,
      rules:{
        name:[
          {
            required: true,
            message:'请输入服务名称',
            trigger:'change'
          }
        ],
        service_cat:[
          {
            required: true,
            message:'请选择服务分类',
            trigger:'change'
          }
        ],
        price:[
          {
            required: true,
            message:'请输入单价',
            trigger:'change'
          }
        ],
        unit:[
          {
            required: true,
            message: '请输入单位',
            trigger: 'change'
          }
        ],
        num:[
          {
            required: true,
            message: '请输入数量',
            trigger: 'change'
          }
        ],
      total_fee:[
          {
            required: true,
            message: '请输入含税报价',
            trigger: 'change'
          }
      ],
      pay_fee:[
          {
            required: true,
            message: '请输入非税报价',
            trigger: 'change'
          }
      ],
       tax:[
          {
            required: true,
            message: '请输入税率',
            trigger: 'change'
          }
        ],
        tax_fee:[
          {
            required: true,
            message: '请输入税额',
            trigger: 'change'
          }
        ],
        remark:[
          {
            required: true,
            message: '请输入备注',
            trigger: 'change'
          }
        ]
      }
    }
  },
  methods:{
    initForm(){
      this.ruleForm = {...this.sitem}
      this.$refs.sort.init(this.sitem.merge_id.split('-'))
    },
    number_change(num,prop){
      this.ruleForm[prop] = num
    },
    handleCategoryChange(value = []){
      if(value.length !== 3){
        this.ruleForm.service_cat = ""
        this.service_cat = []
        return 
      }

      this.ruleForm.service_cat = value[2]
      this.service_cat = value
    },
    handleClose(){
      this.innerVisible = false
    },
    onSave(){
      this.$refs.ruleForm.validate(async isValid => {
        if(!isValid) return

        const { id, name, service_cat, unit, price, num, remark, total_fee, tax, pay_fee, tax_fee } = this.ruleForm;

        const includeTaxTotal = accMul(num, price)
        const total = add_sum(pay_fee, tax_fee)

        if(Number(includeTaxTotal) !== Number(total_fee)) {
          this.$message.warning('单价*数量 必须等于必须等于含税报价!')
          return
        }

        if(Number(total) !== Number(total_fee)){
          this.$message.warning('非税报价+税额 必须等于含税报价!')
          return
        }

        const params = {
          id,
          name,
          service_cat,
          unit,
          price,
          num,
          remark,
          planId: this.$route.query.id,
          store_id: this.storeId,
          total_fee,
          pay_fee,
          tax,
          tax_fee
        }



        if(this.type === ModalTypes.copy){
          delete params.id
        }

        this.loading = true
        const { code } = await asyncRequest.planUpdateInfo(params)
        this.loading = false 
        
        if(code !== 1) return
        this.innerVisible = false
        this.$emit('refresh')
      })
    }
  }
}
</script>
