<template>
  <div>
    <el-button size="small" type="primary" @click="visible = true">添 加</el-button>
    <el-drawer
        title="添加其他费用"
        :visible.sync="visible"
        size="800px"
        direction="rtl"
        append-to-body
        :show-close="false"
        @close="onClose">
      <div class="drawer__panel">
        <el-row>
          <el-form :model="form" :rules="rules" ref="form"  size="mini" label-position="right">
            <el-col :span="24">
              <el-form-item label="类型" label-width="80px" prop="itemtype">
                <el-select v-model="form.items[0].itemtype" placeholder="请选择" style="width: 100%">
                  <el-option
                      v-for="item in itemtypes"
                      :key="item.value"
                      :label="item.value"
                      :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="费用明细" label-width="80px" prop="itemname">
                <el-input type="textarea"  v-model="form.items[0].itemname" autocomplete="off" placeholder="输入费用明细" autosize></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="单价" label-width="80px" prop="price">
                <el-input type="number"  v-model="form.items[0].price" autocomplete="off" placeholder="请输入单价" @change="priceChange"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="数量" label-width="80px" prop="qty">
                <el-input  v-model="form.items[0].qty" autocomplete="off" placeholder="请输入数量" @change="numChange"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="单位" label-width="80px" prop="unitname">
                <el-select v-model="form.items[0].unitname" placeholder="请选择" style="width: 100%">
                  <el-option
                      v-for="item in unitList"
                      :key="item.unitname"
                      :label="item.unitname"
                      :value="item.unitname">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="金额" label-width="80px" prop="amount">
                <el-input  v-model="amount" autocomplete="off"  disabled></el-input>
              </el-form-item>
            </el-col>

          </el-form>
        </el-row>
      </div>
      <div class="fixed__btn__panel">
        <el-button size="small" @click="onClose" class="normal-btn-width">取 消</el-button>
        <el-button size="small" :disabled="form.items[0].itemtype === '' && form.items[0].itemname === '' && form.items[0].unitname === '' && form.items[0].qty === '' && form.items[0].price === ''"
                   type="primary" @click="onSubmit" class="normal-btn-width">确 定</el-button>
      </div>
    </el-drawer>
  </div>
</template>

<script>
export default {
  name: "add",
  data(){
    return {
      visible:false,
      amount:0,
      form:{
        "sa_quotedpriceid":this.$route.query.id,     //sat_notice_classid<=0时 为新增
        "items":[
          {
            "sa_quotedprice_specialitemsid":0,
            "itemtype":"",
            "itemname":"",
            "unitname":"",
            "qty":'',
            "price":''
          }
        ]
      },
      rules:{
      },
      unitList:[],
      itemtypes:[]
    }
  },
  methods:{
    async onSubmit(){
      const res = await this.$api.requested({
        "id": 20230211155503,
        "content": this.form
      })
      this.tool.showMessage(res,()=>{
        this.form = {
          "sa_quotedpriceid":this.$route.query.id,     //sat_notice_classid<=0时 为新增
          "items":[
            {
              "sa_quotedprice_specialitemsid":0,
              "itemtype":"",
              "itemname":"",
              "unitname":"",
              "qty":'',
              "price":''
            }
          ]
        }
        this.amount = 0
        this.visible = false
        this.$emit('addSuccess')
      })
    },
    onClose(){
      this.form = {
        "sa_quotedpriceid":this.$route.query.id,     //sat_notice_classid<=0时 为新增
        "items":[
          {
            "sa_quotedprice_specialitemsid":0,
            "itemtype":"",
            "itemname":"",
            "unitname":"",
            "qty":'',
            "price":''
          }
        ]
      }
      this.amount = 0
      this.visible = false
    },
    /*查询计量单位*/
    async queryUnit(){
      const res = await this.$api.requested({
        "id": "20220922084803",
        "content": {
          "where":{
            "condition":""
          }
        }
      })
      this.unitList = res.data
    },
    /*获取报价单费用类型*/
    queryType(){
      this.$store.dispatch('optiontypeselect','quotedpriceitemtype').then(res=>{
        this.itemtypes = res.data
      })
    },
    numChange(){
      if (this.form.items[0].qty !== '' && this.form.items[0].price !== ''){
        this.form.items[0].price = Math.round(this.form.items[0].price * 100) / 100
        this.amount = Math.round((this.form.items[0].qty * this.form.items[0].price) * 100) /100
      }else {
        this.form.items[0].price = Math.round(this.form.items[0].price * 100) / 100
        this.amount = 0
      }
    },
    priceChange(){
      if (this.form.items[0].qty !== '' && this.form.items[0].price !== ''){
        this.form.items[0].price = Math.round(this.form.items[0].price * 100)/100
        this.amount = Math.round((this.form.items[0].qty * this.form.items[0].price) * 100) /100
      }else {
        this.form.items[0].price = Math.round(this.form.items[0].price * 100) /100
        this.amount = 0
      }
    }
  },
  mounted() {
    this.queryUnit()
    this.queryType()
  }
}
</script>

<style scoped>

</style>