<template>
  <div>
    <el-button size="small" type="primary" @click="onShow" >价格等级设置</el-button>
    <el-drawer
        title="价格等级设置"
        :visible.sync="drawer"
        size="600px"
        direction="rtl"
        append-to-body
        :show-close="false"
        >
      <div class="drawer__panel">
        <div style="margin-top: -10px;margin-bottom: 10px">
          <el-button size="small" type="primary"  @click="addShow">添加</el-button>
        </div>
        <tableLayout :layout="tablecols" :data="list" :custom="true" height="300px" >
          <template v-slot:customcol="scope">
            <p v-if="scope.column.columnname === 'discountrate'">
              {{scope.column.data[scope.column.columnname] * 100}}
            </p>
            <p v-else>{{scope.column.data[scope.column.columnname]}}</p>
          </template>
          <template v-slot:opreation="scope">
            <el-popconfirm
                title="确定删除设置的价格等级吗?"
                @confirm="onDel(scope.data.sa_itemprice_grademappingid)"
            >
              <el-button slot="reference" type="text" size="mini">删除</el-button>
            </el-popconfirm>
          </template>
        </tableLayout>
      </div>
      <div class="fixed__btn__panel">
        <el-button size="small" @click="drawer = false" class="normal-btn-width">取 消</el-button>
      </div>
    </el-drawer>
    <el-dialog title="添加价格等级" :visible.sync="dialogFormVisible" append-to-body width="500px" @close="dialogFormVisible = false;$refs.form.resetFields()">
      <el-form :model="form" ref="form" :rules="rules">
        <el-form-item label="商户等级:" :label-width="formLabelWidth" prop="grade">
          <el-select v-model="form.grade" placeholder="请选择商户等级" style="width: 100%">
            <el-option v-for="item in agentgrade" :key="item" :label="item" :value="item"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="价格等级:" :label-width="formLabelWidth" prop="pricegrade">
          <el-select v-model="form.pricegrade" placeholder="请选择价格等级" style="width: 100%">
            <el-option v-for="item in pricegrade" :key="item.index" :label="item.value" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="折扣率(%):" :label-width="formLabelWidth" prop="discountrate">
          <el-input v-model="form.discountrate" autocomplete="off" placeholder="请填写折扣" @change="discountrateChange"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false;$refs.form.resetFields()">取 消</el-button>
        <el-button type="primary" @click="add">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "priceLevelSetting", //价格等级设置
  data(){
    return {
      drawer:false,
      tablecols:[],
      list:[],
      total:0,
      currentPage:0,
      param:{
        "id": 20220927143802,
        "content": {
        },
      },
      dialogFormVisible: false,
      form: {
        sa_itemprice_grademappingid: 0,
        grade: '',//商户等级
        pricegrade: '', //价格等级
        discountrate: "" //折扣率，保留2位小数
      },
      rules:{
        grade: [
          { required: true, message: '请选择商户等级', trigger: 'change' },
        ],
        pricegrade: [
          { required: true, message: '请选择价格等级', trigger: 'change' },
        ],
        discountrate: [
          { required: true, message: '请输入折扣率', trigger: 'blur' }
        ],
      },
      formLabelWidth: '120px',
      pricegrade:[],
      agentgrade:[]
    }
  },
  methods:{
    onShow(){
      this.drawer = true
      this.listData()
      this.queryPrice()
    },
    addShow(){
      this.dialogFormVisible = true
      this.queryPrice()
    },
    discountrateChange(){
      if (this.form.discountrate < 0){
        this.form.discountrate = 0
      }else if(this.form.discountrate > 100){
        this.form.discountrate = 100
      }
    },
    add(){
      this.$refs.form.validate(async(valid)=>{
        if (!valid) return false
        this.form.discountrate = (this.form.discountrate /100).toFixed(2)
        const res = await this.$api.requested({
          "id": 20220927143602,
          "content": this.form,
        })
        this.tool.showMessage(res,()=>{
          this.dialogFormVisible = false
          this.$refs.form.resetFields()
          this.listData()
        })
      })
    },
    async listData(){
      const res = await this.$api.requested(this.param)
      this.list = res.data
      console.log(this.list)
      this.queryAgentGrade()
    },
    queryAgentGrade(){
      this.$store.dispatch('optiontypeselect','agentgrade').then(res=>{
        var t = 0
        this.agentgrade = []
        res.data.forEach((e,index)=>{
          console.log(index)
          var flag = 0
          for (var i=0;i<this.list.length;i++){
            if (this.list[i].grade == e.value ){
              flag = 1
              break
            }else {
              flag = 0
            }
          }
          if (flag === 0){
            this.agentgrade[t] = e.value
            console.log(this.agentgrade[t])
            t = t + 1
          }
        })
        console.log(this.agentgrade)
      })
    },
    async onDel(id){
      const res = await this.$api.requested({
        "id": 20220927143702,
        "content": {
          "sa_itemprice_grademappingids": [id]
        },
      })
      this.tool.showMessage(res,()=>{
        this.listData()
      })
    },
    queryPrice(){
      this.$store.dispatch('optiontypeselect','pricegrade').then(res=>{
        this.pricegrade = res.data
        console.log(res.data,"pricegrade")
      })
    }
  },
  mounted() {

  },
  created() {
    this.tablecols = this.tool.tabelCol(this.$route.name)['priceLevelSettingTable'].tablecols
  }
}
</script>

<style scoped>

</style>