<template>
  <div>
    <xy-dialog ref="dialog" :width="60" :is-show.sync="isShow" :type="'form'" :title="title" :form="form">
      <template v-slot:table>
        <xy-table
            ref="xyTable"
            :table-item="table"
            :list="categoryRuleList"
            :isPage='false'
            >
            <template v-slot:btns>
              <el-table-column align='center' label="操作" width="120" header-align="center">
                <template slot="header" slot-scope="scope">
                  <el-button
                    size="mini" @click="addRules">新增</el-button>
                </template>
                <template slot-scope="scope" style="display: flex;">
                    <Button v-if="!scope.row.isEdit" style="margin-right:5px" size="small" type="primary" @click="submitRules(scope.row)">保存</Button>
                    <Button v-else style="margin-right:5px" size="small" type="primary" @click="scope.row.isEdit=false">修改</Button>

                   <el-popover width="180"
                           :ref="`${scope.row.id}-${scope.$index}`"
                               trigger="hover">
                     <template>
                       <div>
                         <p style="padding-bottom: 10px;">确定要删除吗？</p>
                         <div style="text-align: right;margin: 0;">
                           <el-button size="mini"
                                      type="text"
                                      @click="$refs[`${scope.row.id}-${scope.$index}`].doClose()"
                                      >取消</el-button>
                           <el-button type="primary"
                                      size="mini"
                                      @click="delRules(scope.row,scope.$index)">确定</el-button>
                         </div>
                       </div>
                     </template>
                     <template #reference>
                         <Button
                           style="margin-right:6px;"
                           type="error"
                           size="small">
                           删除
                         </Button>
                     </template>
                   </el-popover>
                </template>
              </el-table-column>
            </template>
        </xy-table>

      </template>
      <template v-slot:footerContent>
          <Button @click="isShow=false,$emit('refresh')">关闭</Button>
      </template>
    </xy-dialog>

  </div>
</template>

<script>
  import {
    Message
  } from 'element-ui'
import { index,store,save,destroy} from "@/api/category/rule.js"
  export default {
    components: {
    },
    data() {
      return {
        isShow: false,
        visible:false,
        type: 'add',
        title:'规则设置',
        category_id:'',
        id:'',
        categoryRuleList:[],
        form: {
          table:''
        },
        table:[{
            label: "开始日期",
            prop: "start_at",
            customFn: row => {
              return(<el-date-picker v-model={row.start_at}
                    type="date"
                    disabled={row.isEdit}
                    format="yyyy-MM-dd"
                    value-format="yyyy-MM-dd"
                    placeholder="选择日期">
              </el-date-picker>)
            }
          },{
            label: "结束日期",
            prop: "end_at",
            customFn: row => {
              return(<el-date-picker v-model={row.end_at}
                    type="date"
                    format="yyyy-MM-dd"
                    disabled={row.isEdit}
                    value-format="yyyy-MM-dd"
                    placeholder="选择日期">
              </el-date-picker>)
            }
          },{
            label: "填报数量",
            prop: "quantity",
            width:80,
            customFn: row => {
              return(<el-input type='text' disabled={row.isEdit} v-model={row.quantity}></el-input>)
            }
          },{
            label: "备注",
            prop: "remark",
            customFn: row => {
              return(<el-input type='textarea'  disabled={row.isEdit} v-model={row.remark}></el-input>)
            }
          },{
            label: "排序",
            prop: "myindex",
            width:80,
            customFn: row => {
              return(<el-input type='text' disabled={row.isEdit} v-model={row.myindex}></el-input>)
            }
          }
          ],
        rules: {
          categoryRuleList: [{
            required: true,
            message: '请选择填报清单'
          }]
        }
      }
    },
    created() {
    },
    methods: {
      async getCategoryRule(){
        const res = await index({
          category_id:this.category_id
        })
        res.map(item=>{
          item.isEdit = true
        })
        this.categoryRuleList = res
        console.log("this.categoryRuleList",this.categoryRuleList)
      },
      addRules(){
        this.categoryRuleList.push({
          category_id:this.category_id,
          isEdit:false,
          start_at:'',
          end_at:'',
          quantity:1,
          remark:'',
          myindex:0
        })
      },
      delRules(row,index){
        if(row.id){
          destroy({
            id:row.id
          }).then(res=>{
            this.$Message.success({
              content: `删除成功`,
            });
            this.categoryRuleList.splice(index,1)
          })
        }else{

          this.categoryRuleList.splice(index,1)
        }
      },
      submitRules(row){
        console.log("row",row)
        if(this.isNull(row.start_at)||this.isNull(row.end_at)){
          Message({
            type:'warning',
            message:'请填写全部信息'
          })
          return
        }
        if(row.id){
          save(row).then(res => {
            this.$Message.success({
              content: `保存成功`,
            });
            this.getCategoryRule()
          })
        }else{
          store(row).then(res => {
            this.$Message.success({
              content: `保存成功`,
            });
            this.getCategoryRule()
          })
        }
      },
      isNull(p){
        	return p == '' || p == undefined || p == null || p == 'undefined' || p == 'null';
      },
    },
    watch: {
      isShow(newVal) {
        if(newVal){
          this.getCategoryRule()
        }else{
          this.title='规则设置'
          this.category_id=''
        }
      },
    }

  }
</script>

<style scoped lang="scss">
  ::v-deep .table{
    flex-basis: 100%;
  }
</style>
