<template>
  <nm-container>
    <nm-list ref="list" v-bind="list" v-on="on" @selection-change="handleSelectionChange">
      <!--查询条件-->
      <template v-slot:querybar>
        <!-- <el-form-item label="经销商：" prop="stores">
          <channel-select ref="ChannelSelect" @updateSelection="updateChannel" />
        </el-form-item> -->
        <el-form-item label="关键字：" prop="key">
          <el-input v-model="list.model.key" placeholder="编号/名称" />
        </el-form-item>
      </template>
      <!--按钮-->
      <template v-slot:querybar-buttons="{ total }">
        <nm-button v-bind="buttons.importExl" @click="importExl(total)" />
        <nm-button v-bind="buttons.importPart" @click="importPart(total)" />
      </template>

      <!--操作列-->
      <template v-slot:col-operation="{ row }">
        <nm-button v-bind="buttons.deleterow" :id="row.id" @click="deleterow(row)" />
      </template>
    </nm-list>
    <el-dialog title="导入" :visible.sync="dialogVisible" width="570px" height="300px">
      <div><upload-page /></div>
    </el-dialog>
    <el-dialog title="部分导入" :visible.sync="dialogVisiblePart" width="570px" height="300px">
      <div><upload-part /></div>
    </el-dialog>
  </nm-container>
</template>

<script>
import { mixins } from 'dcms-ui'
import page from './page'
import cols from './cols'
import UploadPage from '../components/upload'
import UploadPart from '../components/uploadPart/index.vue'
// import UploadPart from '../components/uploadPart'
// import ChannelSelect from '../../../components/channel-select'

// 接口
const api = $api.tPM.tpmProducts

export default {
  name: page.name,
  mixins: [mixins.list],
  components: { UploadPage, UploadPart }, //ChannelSelect
  data() {
    return {
      curr: { code: '' },
      list: {
        title: '数据列表',
        cols,
        // noOperation: true,
        // multiple: true,
        action: api.queryTpmData,
        operationWidth: '230',
        model: {
          key: '',
        },
        exportOptions: {
          /**启用导出按钮 */
          enabled: true,
          /**导出数据的方法 */
          action: api.exportData,
          /**启用高级配置 */
          advanced: true,
          /**导出按钮位置 */
          btnLocation: 'querybar',
          /**导出按钮权限编码 */
          btnCode: page.buttons.export.code,
          /**默认是否显示标题 */
          showTitle: true,
          /**默认是否显示版权信息 */
          showCopyright: true,
          /**默认是否显示列名 */
          showColName: true,
          /**默认是否显示导出日期 */
          showExportDate: true,
          /**默认是否显示导出人 */
          showExportPeople: true,
        },
      },
      buttons: page.buttons,
      dialogVisible: false,
      dialogVisiblePart: false,
      dialog: {
        item: false,
      },
      on: {
        reset: this.onReset,
      },
    }
  },
  methods: {
    updateChannel(items) {
      let first = items[0]
      //this.list.model.stores = [];
      this.list.model.storeId = first.id
      //this.list.model.stores = items;
      this.$refs.list.refresh()
    },
    onReset() {
      this.list.model.storeId = 0
      //this.$refs.ChannelSelect.;
      this.$refs.ChannelSelect.resetForm()
      this.$refs.list.refresh()
    },
    importExl() {
      this.dialogVisible = true
    },
    importPart() {
      this.dialogVisiblePart = true
    },
    handleSelectionChange(val) {
      //console.log(val)
      this.list.model.multipleSelection = val
    },
    deleterow(row) {
      this._confirm(`您确定要删除数据吗？`).then(() => {
        this._openLoading('请稍后...')
        console.log(row)
        api
          .deleteTpmItem(row.storeCode, row.terminalCode, row.productCode)
          .then(() => {
            this._closeLoading()
            this.$refs.list.refresh()
            this._success('完成！')
          })
          .catch(() => {
            this._closeLoading()
            this._error('失败！')
          })
      })
    },
  },
}
</script>
