<template>
  <zj-tab-page ref="tabPage" :defaultActives="[{ key: 'list', label: $route.meta.title + '-列表', essential: true }]">
    <template slot-scope="{ activeKey, data }">
      <div
        :style="{
          width: '100%',
          height: activeKey == 'list' ? '100%' : '0px',
          overflow: 'hidden'
        }"
      >
        <template-page
          ref="pageRef"
          :get-list="getList"
          :table-attributes="tableAttributes"
          :table-events="tableEvents"
          :options-evens-group="optionsEvensGroup"
          :moreParameters="moreParameters"
          :column-parsing="columnParsing"
          :exportList="exportList"
          :operation="operation()"
        >
        </template-page>
      </div>
      <div v-if="~['add', 'detail'].indexOf(activeKey)" style="box-sizing: border-box; padding: 16px">
        <div>
          <zj-form-container ref="formRef" :form-data="formData">
            <zj-form-module title="单据信息" :form-data="formData" :form-items="formItems"> </zj-form-module>
            <zj-form-module title="客户信息" :form-data="formData" :form-items="basicInfo"> </zj-form-module>
            <zj-form-module title="产品信息" :form-data="formData" :form-items="product"> </zj-form-module>
            <zj-form-module title="负激励信息" label-width="120px" :form-data="formData" :form-items="pandanxinxi">
            </zj-form-module>
            <zj-form-module title="正激励信息" label-width="120px" :form-data="formData" :form-items="czpandanxinxi">
            </zj-form-module>
          </zj-form-container>
          <div slot="footer" class="dialog-footer">
            <el-button size="mini" @click="data.removeTab">取 消</el-button>
            <el-button
              v-if="!formData.status || formData.status == 'SAVE'"
              size="mini"
              type="primary"
              @click="quedingbaocun(data.removeTab)"
              >保存</el-button
            >
            <el-button
              v-if="formData.status == 'SAVE'"
              size="mini"
              type="primary"
              @click="quedingshenhe(data.removeTab)"
              >审核</el-button
            >
          </div>
        </div>
      </div>
    </template>
  </zj-tab-page>
</template>

<script>
import TemplatePage from '@/components/template/template-page-1.vue'
import import_mixin from '@/components/template/import_mixin.js'
import operation_mixin from '@/components/template/operation_mixin.js'
import basicInfo from './mixins/basicInfo'
import productColumns from './mixins/productColumns'
import pandanxinxi from './mixins/pandanxinxi'
import czpandanxinxi from './mixins/czpandanxinxi'
import common_form from './mixins/common_form'
import {
  orderPunishList,
  orderPunishListExport,
  orderPunishExamine,
  orderPunishDelete,
  orderPunishDetail,
  orderPunishSave
} from '@/api/penaltyWorkOrder'
export default {
  components: { TemplatePage },
  mixins: [import_mixin, operation_mixin, basicInfo, productColumns, pandanxinxi, czpandanxinxi, common_form],
  data() {
    return {
      // 表格属性
      tableAttributes: {
        // 启用勾选列
        selectColumn: false
      },
      // 表格事件
      tableEvents: {
        'selection-change': this.selectionChange
      },
      // 勾选选中行
      recordSelected: [],
      formData: {
        address: '',
        area: '',
        areaId: '',
        city: '',
        cityId: '',
        disposeOrderBaseId: '',
        disposeOrderSmallType: '',
        disposeOrderSmallTypeText: '',
        disposeWebsitId: '',
        disposeWebsitName: '',
        disposeWorkerId: '',
        disposeWorkerMobile: '',
        disposeWorkerName: '',
        examineBy: '',
        examineRemark: '',
        examineTime: '',
        fileUrls: [],
        id: '',
        linkName: '',
        orderBaseId: '',
        orderSmallType: '',
        orderSmallTypeText: '',
        province: '',
        provinceId: '',
        punishOrderProducts: [
          {
            brandId: '',
            brandName: '',
            insideCode: '',
            mainId: '',
            mainName: '',
            outCode: '',
            punishOrderId: '',
            smallId: '',
            smallName: '',
            specsName: ''
          }
        ],
        punishOrderWorkers: [],
        remark: '',
        // "status": "",
        street: '',
        streetId: '',
        totalAmount: '',
        userMobile: '',
        userMobile2: '',
        userName: '',
        websitId: '',
        websitName: ''
      }
    }
  },
  computed: {
    // 更多参数
    moreParameters() {
      return []
    },
    // 事件组合
    optionsEvensGroup() {
      return [
        [
          [
            this.optionsEvensAuth('add', {
              click: () => {
                this.$refs.tabPage.addTab({
                  // 对应显示的模块
                  activeKey: 'add',
                  // 唯一标识
                  key: 'add',
                  // 页签名称
                  label: '新增',
                  // 打开时事件
                  triggerEvent: () => {
                    this.handleClose()
                    this.$nextTick(() => {
                      this.openForm()
                    })
                  },
                  // 关闭时事件
                  closeEvent: () => {}
                })
              }
            })
          ]
        ]
      ]
    }
  },
  mounted() {
    this.initFun()
  },
  methods: {
    initFun() {
      if (this.pageType == 'detail') {
        this.$refs.tabPage.addTab({
          // 对应显示的模块
          activeKey: 'detail',
          // 唯一标识
          key: 'detail',
          // 页签名称
          label: '详情',
          // 打开时事件
          triggerEvent: () => {
            this.handleClose()
            this.$nextTick(() => {
              orderPunishDetail({ id: this.pageCode }).then(res => {
                Object.assign(this.formData, res.data, {
                  fileUrls: res.data.fileUrls ? res.data.fileUrls.split(',').map(url => ({ url })) : []
                })
                this.openForm()
              })
            })
          },
          // 关闭时事件
          closeEvent: () => {}
        })
      }
    },
    // 列表请求函数
    getList: orderPunishList,
    // 列表导出函数
    exportList: orderPunishListExport,
    // 表格列解析渲染数据更改
    columnParsing(item, defaultData) {
      return defaultData
    },
    // 监听勾选变化
    selectionChange(data) {
      this.recordSelected = data
    },
    // 关闭
    handleClose() {
      this.$data.formData = this.$options.data().formData
    },
    // 打开弹窗
    openForm() {
      this.getinitlbslist()
      this.getProductSel()
      this.getWebsitList()
      this.getWorkers()
      this.getorderSmallTypeData()
      this.getdisposeWebsitIds()
    },
    // 保存
    quedingbaocun(removeTab) {
      this.$refs.formRef.validate((valid, invalidFields, errLabels) => {
        if (valid) {
          orderPunishSave({
            ...this.formData,
            fileUrls: this.formData.fileUrls.map(item => item.url).join(',')
          }).then(res => {
            this.$message({
              type: 'success',
              message: '保存成功'
            })
            this.$refs.pageRef.refreshList()
            removeTab && removeTab()
            this.handleClose()
          })
        }
      })
    },
    // 审核
    quedingshenhe(removeTab) {
      orderPunishExamine({
        id: this.formData.id,
        status: 'OK'
      }).then(res => {
        this.$message({
          type: 'success',
          message: '审核成功'
        })
        this.$refs.pageRef.refreshList()
        removeTab && removeTab()
        this.handleClose()
      })
    },
    // 操作按钮
    operation() {
      return this.operationBtn({
        detail: {
          click: ({ row, index, column }) => {
            this.$refs.tabPage.addTab({
              // 对应显示的模块
              activeKey: 'detail',
              // 唯一标识
              key: 'detail',
              // 页签名称
              label: '详情',
              // 打开时事件
              triggerEvent: () => {
                this.handleClose()
                this.$nextTick(() => {
                  orderPunishDetail({ id: row.id }).then(res => {
                    Object.assign(this.formData, res.data, {
                      fileUrls: res.data.fileUrls ? res.data.fileUrls.split(',').map(url => ({ url })) : []
                    })
                    this.openForm()
                  })
                })
              },
              // 关闭时事件
              closeEvent: () => {}
            })
          }
        },
        del: {
          prompt: '是否确定删除？',
          conditions: ({ row, index, column }) => {
            return row.status != 'OK'
          },
          click: ({ row, index, column }) => {
            orderPunishDelete({ id: row.id }).then(res => {
              this.$message({
                type: 'success',
                message: '删除成功'
              })
              this.$refs.pageRef.refreshList()
            })
          }
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped></style>
