<template>
  <div>
    <el-button size="mini" type="text" @click="addBtn" v-if="data" :disabled="disabled">添 加 子 级 工 作</el-button>
    <el-button size="mini" type="primary" @click="addBtn" :disabled="disabled" v-else>添 加</el-button>
    <el-drawer append-to-body :visible.sync="dialogFormVisible" size="70%">
      <div slot="title" style="font-size: 15px">
        添加工作项
      </div>
      <div class="drawer__panel">
        <el-input style="width:250px;margin-bottom:10px" size="small" placeholder="请输入搜索内容" clearable @clear="getOrderList(params.content.pageNumber=1)" v-model="params.content.where.condition" @keyup.enter.native="getOrderList(params.content.pageNumber=1)"></el-input>
        <selectTable @selectChange="selectChange" v-if="dialogFormVisible" idName="sa_workpresetid" ref="table" v-model="result" :layout="tablecols" :data="orderList" :custom="true" height="500px"  @upDateData="upDateData">
           <template v-slot:customcol="scope">
              <div v-if="scope.column.columnname == 'fileupload'" :style="scope.column.data.fileupload ? scope.column.data.fileupload == 1 ? 'color:green' : 'color:red' : 'color:#333333'">
                {{scope.column.data.fileupload ? scope.column.data.fileupload == 1 ? '非必填' : '必填' : '无'}}
              </div>
              <div v-else-if="scope.column.columnname == 'additem'" :style="scope.column.data.additem ? scope.column.data.additem == 1 ? 'color:green' : 'color:red' : 'color:#333333'">
                {{scope.column.data.additem ? scope.column.data.additem == 1 ? '添加' : '必添加' : '不添加'}}
              </div>
              <div v-else-if="scope.column.columnname == 'textedit'" :style="scope.column.data.textedit ? scope.column.data.textedit == 1 ? 'color:green' : 'color:red' : 'color:#333333'">
                {{scope.column.data.textedit ? scope.column.data.textedit == 1 ? '非必填' : '必填' : '无'}}
              </div>
              <div v-else-if="scope.column.columnname == 'contractupload'" :style="scope.column.data.contractupload ? scope.column.data.contractupload == 1 ? 'color:green' : 'color:red' : 'color:#333333'">
                {{scope.column.data.contractupload ? scope.column.data.contractupload == 1 ? '非必填' : '必填' : '无'}}
              </div>
              <div v-else-if="scope.column.columnname == 'isadditem'" :style="scope.column.data.isadditem ? scope.column.data.isadditem == 1 ? 'color:green' : 'color:red' : 'color:#333333'">
                {{scope.column.data.isadditem ? scope.column.data.isadditem == 1 ? '非必填' : '必填' : '无'}}
              </div>
              <div v-else-if="scope.column.columnname == 'addperson'" :style="scope.column.data.addperson ? scope.column.data.addperson == 1 ? 'color:green' : 'color:red' : 'color:#333333'">
                {{scope.column.data.addperson ? scope.column.data.addperson == 1 ? '非必填' : '必填' : '无'}}
              </div>
              <div v-else-if="scope.column.columnname == 'amountpay'" :style="scope.column.data.amountpay ? scope.column.data.amountpay == 1 ? 'color:green' : 'color:red' : 'color:#333333'">
                {{scope.column.data.amountpay ? scope.column.data.amountpay == 1 ? '非必填' : '必填' : '无'}}
              </div>
              <div v-else-if="scope.column.columnname == 'required'" :style="scope.column.data.required ? scope.column.data.required == 1 ? 'color:green' : 'color:red' : 'color:#333333'">
                {{scope.column.data.required ? scope.column.data.required == 1 ? '非必填' : '必填' : '无'}}
              </div>
              <div v-else>
                {{scope.column.data[[scope.column.columnname]]?scope.column.data[[scope.column.columnname]]:'--'}}
              </div>
            </template>
        </selectTable>
        <div class="container normal-panel" style="text-align:right">
          <el-pagination
              style="text-align:right"
              background
              small
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="params.content.pageNumber"
              :page-size="params.content.pageSize"
              layout="total, prev, pager, next, jumper"
              :total="total">
          </el-pagination>
        </div>
      </div>
      <div class="fixed__btn__panel">
        <el-button size="small" @click="dialogFormVisible = false" class="normal-btn-width">取 消</el-button>
        <el-button size="small" type="primary" @click="onSubmit" :disabled="isLength" class="normal-btn-width">确 定</el-button>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import selectTable from '@/components/selectTable/index'
export default {
  name: "add",
  props:['data','disabled'],
  components:{selectTable},
  data(){
    return {
      result:[],
      selectArr:[],
      isLength:true,
      dialogFormVisible:false,
      orderList:[],
      tablecols:[],
      total:0,
      params: {
        "id": 20230207132803,
        "content": {
          "pageNumber": 1,
          "pageSize": 20,
          "where": {
              "condition": ""
          }
        }
      }
    }
  },
  created () {
  },
  watch: {
    dialogFormVisible (val) {
      if(!val) {
        this.$refs.table.allArr = []
      }
    }
  },
  methods:{
    addBtn () {
      this.dialogFormVisible = true
      this.getOrderList()
      this.tablecols = this.tool.tabelCol(this.$route.name).serveToskTable.tablecols
    },
    async onSubmit(){
      let data = this.$refs.table.allArr.map(item => {
        return {
          "sa_workorder_template_worksid": 0, 
          "parentid": this.data ? this.data.sa_workorder_template_worksid : 0, 
          "sa_workpresetid":item.sa_workpresetid,
          "sequence":"1"
        }
      })
      let res = await this.$api.requested({
        "id": "20230207145503",
        "content": {
            "sa_workorder_templateid": this.$route.query.id,
            "workinfos": data
        }
      })
      this.tool.showMessage(res,()=>{
        this.$emit('onSuccess')
        this.dialogFormVisible = false
      })
    },
    async getOrderList () {
      let res = await this.$api.requested(this.params)
      console.log(res.data);
      
      this.orderList = res.data
      this.total = res.total
      console.log(res);
      
    },
    selectChange (data) {
      console.log(data);
      
      this.selectArr = data
      this.isLength = data.length < 1
    },
    upDateData (data) {
      this.selectArr = data
      this.isLength = data.length < 1
    },
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
      this.params.content.pageSize = val
      this.getOrderList()
    },
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      this.params.content.pageNumber = val
      this.getOrderList()
    },
  }
}
</script>

<style scoped>
.dialog-footer {
  margin-top: 0;
}
.el-select {
  width: 100%;
}
</style>