<template>
  <div>
    <el-button size="mini" type="primary" @click="addBtn">添 加</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_serviceorderitemsid" ref="table" v-model="result" :layout="tablecols" :data="orderList" :custom="true" height="500px"  @upDateData="upDateData">
           <template v-slot:customcol="scope">
              <div>{{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'
import { log } from '@antv/g2plot/lib/utils'
export default {
  name: "add",
  props:['data','disabled'],
  components:{selectTable},
  data(){
    return {
      result:[],
      selectArr:[],
      isLength:true,
      dialogFormVisible:false,
      orderList:[],
      tablecols:[],
      total:0,
      params: {
        "id": 20230206161903,
        "content": {
          "pageNumber": 1,
          "pageSize": 20,
          "sa_serviceorderid":'',
          "where": {
              "condition": ""
          }
        }
      }
    }
  },
  computed: {
    isEdit () {
      return function (data) {
        console.log(this.selectArr.some(item => item == data));
        let is = this.selectArr.some(item => item == data)
        return is
      }
    }
  },
  created () {
    this.getOrderList()
    this.tablecols = this.tool.tabelCol(this.$route.name).productTable.tablecols
  },
  watch: {
    dialogFormVisible (val) {
      if(!val) {
        this.$refs.table.allArr = []
      }
    }
  },
  methods:{
    addBtn () {
      this.dialogFormVisible = true
      this.getOrderList()
    },
    async onSubmit(){
      let data = this.$refs.table.allArr.map(item => {
        return {
          "sa_serviceorderitemsid": 0, 
          "itemid": item.itemid, 
          "reason": ''
        }
      })
      let res = await this.$api.requested({
        "id": "20230206161803",
        "content": {
            "sa_serviceorderid": this.$route.query.id,
            "iteminfos": data
        }
      })
      this.tool.showMessage(res,()=>{
        this.$emit('onSuccess')
        this.dialogFormVisible = false
      })
    },
    async getOrderList () {
      this.params.content.sa_serviceorderid = this.$route.query.id
      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) {
      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>