<template>
  <div class="page">
    <template-page
      v-if="!formDialog && isShowTab"
      ref="pageRef"
      :get-list="getList"
      :table-attributes="tableAttributes"
      :table-events="tableEvents"
      :operationColumnWidth="110"
      :options-evens-group="optionsEvensGroup"
      :moreParameters="moreParameters"
      :column-parsing="columnParsing"
      :operation="operation()"
      :exportList="exportList"
    >
      <div slot="moreSearch">
        <el-radio-group v-model="retState" size="mini" @change="changeType">
          <el-radio-button label="">全部</el-radio-button>
          <el-radio-button label="SAVE">保存</el-radio-button>
          <el-radio-button label="SUBMIT">提交</el-radio-button>
          <el-radio-button label="WAIT">待审核</el-radio-button>
          <el-radio-button label="OK">审核通过</el-radio-button>
        </el-radio-group>
        <br /><br />
      </div>
    </template-page>
    <div class="detail" v-if="formDialog">
      <auxiliarySalesReturnOrderDetail
        :id="id"
        @back="backList"
        :formType="formDialogType"
        :title="'辅材销售退货单' + formDialogTitles[formDialogType]"
      ></auxiliarySalesReturnOrderDetail>
    </div>
  </div>
</template>

<script>
import TemplatePage from '@/components/template/template-page-1.vue'
import auxiliarySalesReturnOrderDetail from '../components/auxiliarySalesReturnOrderDetail.vue'
import import_mixin from '@/components/template/import_mixin.js'
import ImageUpload from '@/components/file-upload'
import { downloadFiles } from '@/utils/util'
import { required, mobileRequired, mobile, httpUrl, email } from '@/components/template/rules_verify.js'
import { listPageV2, pageExport, getDetail, add, edit, submit } from '@/api/auxiliaryFittings/auxiliarySalesReturnOrder'
import operation_mixin from '@/components/template/operation_mixin.js'
export default {
  components: { TemplatePage, ImageUpload, auxiliarySalesReturnOrderDetail },
  mixins: [import_mixin, operation_mixin],
  data() {
    return {
      // 表格属性
      tableAttributes: {
        // 启用勾选列
        selectColumn: true
      },
      // 表格事件
      tableEvents: {
        'selection-change': this.selectionChange
      },
      // 勾选选中行
      recordSelected: [],
      /** 表单变量 */
      formDialogType: 0,
      formDialogTitles: ['新增', '编辑', '详情'],
      formDialog: false,
      id: '',
      isShowTab: true,
      retState: !!~['SAVE', 'SUBMIT', 'WAIT', 'OK'].indexOf(this?.$route?.params?.pageCode)
        ? this?.$route?.params?.pageCode
        : '',
      orderEnginBaseId: !~['SAVE', 'SUBMIT', 'WAIT', 'OK'].indexOf(this?.$route?.params?.pageCode)
        ? this?.$route?.params?.pageCode
        : ''
    }
  },
  computed: {
    // 事件组合
    optionsEvensGroup() {
      return [
        [
          [
            this.optionsEvensAuth('add', {
              click: this.addData
            })
          ]
        ]
      ]
    },
    // 更多参数
    moreParameters() {
      return []
    },
    formItems() {}
  },
  methods: {
    // 切换状态
    changeType(val) {
      this.$refs?.pageRef?.refreshList()
    },
    backList() {
      this.id = ''
      this.formDialog = false
      this.$refs?.pageRef?.refreshList()
    },
    // 列表请求函数
    getList(p, cb) {
      try {
        var pam = JSON.parse(JSON.stringify(p))
        pam.params.push({ param: 'a.goods_type', compare: '=', value: 'M' })
        if (this.retState) {
          pam.params.push({ param: 'a.ret_state', compare: '=', value: this.retState })
        }
        if (this.orderEnginBaseId) {
          pam.params.push({ param: 'a.order_engin_base_id', compare: '=', value: this.orderEnginBaseId })
        }
        cb && cb(pam)
        return listPageV2(pam)
      } catch (error) {
        console.log(error)
      }
    },
    // 列表导出函数
    exportList: pageExport,
    // 表格列解析渲染数据更改
    columnParsing(item, defaultData) {
      if (item.jname === 'idCardImg') {
        defaultData.render = (h, { row, index, column }) => {
          return (
            <div style="padding:0 6px;cursor: pointer;">
              {row.idCardImg
                ? row.idCardImg
                    .split(',')
                    .map(url => (
                      <el-image
                        src={this.$showImgUrl(url)}
                        preview-src-list={[this.$showImgUrl(url)]}
                        fit="fit"
                        style="width:80px;height:80px;"
                      />
                    ))
                : null}
            </div>
          )
        }
      }
      return defaultData
    },
    // 监听勾选变化
    selectionChange(data) {
      this.recordSelected = data
    },

    operation() {
      return this.operationBtn({
        detail: {
          click: ({ row, index, column }) => {
            this.id = row.salesRetId
            this.formDialogType = 2
            this.openForm()
          }
        },
        Confirm: {
          conditions: ({ row, index, column }) => {
            return row.retState == 'WAIT'
          },
          click: ({ row, index, column }) => {
            this.id = row.salesRetId
            this.formDialogType = 2
            this.openForm()
          }
        }
      })
    },

    addData() {
      this.formDialogType = 0
      this.openForm()
    },
    openForm() {
      this.formDialog = true
    },
    // 下载导入模版
    handleDownload() {
      // downloadFiles('charging/standard/download');
    }
  }
}
</script>

<style lang="scss" scoped>
.page {
  height: 100%;
}

.tab {
  padding: 20px 20px 0 20px;
}
</style>
