<template>
  <div style="width: 100%; height: 100%; overflow-y: auto">
    <template-page
      v-show="!pageType"
      ref="pageRef"
      :getList="getList"
      :exportList="exportList"
      :operation="operation()"
      :columnParsing="columnParsing"
      :optionsEvensGroup="optionsEvensGroup"
    >
    </template-page>
    <customer_sales_form :detailsId="detailsId" v-if="pageType === 1 || pageType === 2" :pageType="pageType" @close="handleClose"/>
    <customer_sales_details :detailsId="detailsId" v-if="pageType === 3" :pageType="pageType" @close="handleClose"/>
  </div>
</template>

<script>
import popu from '@/components/template/popu.vue'
import TemplatePage from '@/components/template/template-page-1.vue'
import import_mixin from '@/components/template/import_mixin.js'
import { delFrontOrder, exportCustomerFrontOrder, getFrontOrderList } from '@/api/sales'
import customer_sales_form from '@/views/sales_control/sales_management/components/customer_sales_form'
import customer_sales_details from '@/views/sales_control/sales_management/components/customer_sales_details'

export default {
  components: { TemplatePage, customer_sales_form, customer_sales_details, popu },
  mixins: [import_mixin],
  data() {
    return {
      pageType: 0,
      detailsId: '',
      // 事件组合
      optionsEvensGroup: [
        [
          [
            {
              name: '新增',
              click: () => {
                this.pageType = 1
                this.detailsId = ''
              }
            }
          ]
        ]
        // [
        //   [
        //     {
        //       name: '编辑',
        //       click: ()=>{
        //         this.pageType = 2
        //       }
        //     }
        //   ]
        // ],
        // [
        //   [
        //     {
        //       name: '删除',
        //       click: this.dels
        //     }
        //   ]
        // ]
      ],
      // 表格属性
      tableAttributes: {
        // 启用勾选列
        selectColumn: true
      },
      // 表格事件
      tableEvents: {
        'selection-change': this.selectionChange
      },
      recordSelected: []
    }
  },
  methods: {
    // 列表请求函数
    getList(...p) {
      this.recordSelected = []
      return getFrontOrderList(...p)
    },
    // 列表导出函数
    exportList: exportCustomerFrontOrder,
    // 表格列解析渲染数据更改
    columnParsing(item, defaultData) {
      return defaultData
    },
    // 监听勾选变化
    selectionChange(data) {
      this.recordSelected = data
    },
    operation() {
      return (h, { row, index, column }) => {
        return (
          <div class="operation-btns">
            <el-button
              size="mini"
              type="text"
              onClick={() => {
                this.detailsId = row.id
                this.pageType = 3
              }}
            >
              查看
            </el-button>
            <el-button
              size="mini"
              type="text"
              onClick={() => {
                this.detailsId = row.id
                this.pageType = 2
              }}
            >
              编辑
            </el-button>
            <el-popconfirm
              onOnConfirm={() => {
                delFrontOrder({ id: row.id }).then(res => {
                  this.$successMsg('删除成功')
                  this.$refs.pageRef.refreshList()
                })
              }}
              title="删除吗？"
            >
              <el-button slot="reference" size="mini" type="text">
                删除
              </el-button>
            </el-popconfirm>
          </div>
        )
      }
    },
    handleClose(){
      this.pageType = 0
      this.$refs.pageRef.refreshList()

    }
    // <el-popconfirm
    //   onOnConfirm = {()=>{
    //     deleteCustomerStockOrder({ id: row.id }).then(res => {
    //       this.$successMsg('删除成功')
    //       this.$refs.pageRef.getTableData()
    //     })              }}
    //   title="删除吗？"
    // >
    //   <el-button slot="reference" type="text">删除</el-button>
    // </el-popconfirm>

    // 批量删除
    // dels() {
    //   if (this.recordSelected.length) {
    //     this.$confirm('此操作将删除数据, 是否继续?', '提示', {
    //       confirmButtonText: '确定',
    //       cancelButtonText: '取消',
    //       type: 'warning'
    //     })
    //       .then(() => {
    //         partsOldOutDel({
    //           ids: this.recordSelected.map(item => item.id).join(',')
    //         })
    //           .then(res => {
    //             this.$refs.pageRef.refreshList()
    //             this.$message({
    //               type: 'success',
    //               message: '删除成功!'
    //             })
    //           })
    //           .catch(() => {
    //             this.$message({
    //               type: 'error',
    //               message: '删除失败'
    //             })
    //           })
    //       })
    //       .catch(() => {
    //         this.$message({
    //           type: 'info',
    //           message: '已取消删除'
    //         })
    //       })
    //   } else {
    //     this.$message({
    //       type: 'info',
    //       message: '请先勾选需要删除的数据!'
    //     })
    //   }
    // }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-table__body-wrapper {
  height: 100% !important;
}
</style>
