<template>
  <Card>
    <div>
      <el-form class="count-form" ref="form" size="mini" inline :model="form">
        <el-form-item label="产品名称">
          <el-input
            v-model.trim="form.name"
            placeholder="请输入产品名称"
            :maxlength="inputMaxLength"
          >
            <i slot="prefix" class="el-icon-search"></i
          ></el-input>
        </el-form-item>
        <el-form-item label="产品编号">
          <el-input
            v-model.trim="form.code"
            placeholder="请输入产品编号"
            :maxlength="inputMaxLength"
          >
            <i slot="prefix" class="el-icon-search"></i
          ></el-input>
        </el-form-item>
        <el-form-item label="产品类型">
          <el-select v-model="form.type">
            <el-option
              v-for="(item, index) of productTypes"
              :key="`option-${index}`"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="险别">
          <el-select v-model="form.risk">
            <el-option
              v-for="(item, index) of riskTypes"
              :key="`option-${index}`"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="上架状态">
          <el-select v-model="form.ifShelve">
            <el-option
              v-for="(item, index) of shelfType"
              :key="`option-${index}`"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="产品渠道">
          <el-select v-model="form.channel">
            <el-option
              v-for="(item, index) of productChannel"
              :key="`option-${index}`"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </div>
    <div class="flex-end mb10">
      <el-button type="primary" size="mini" @click="submit">查询</el-button>
      <el-button size="mini" @click="onReset">重置</el-button>
      <el-button size="mini" type="primary" plain @click="editOrAdd"
        >添加产品</el-button
      >
    </div>
    <el-table
      class="mb10"
      :data="tableData"
      border
      style="width: 100%"
      v-loading="loading"
    >
      <el-table-column
        prop="code"
        align="center"
        label="产品编号"
        fixed
        width="90"
      ></el-table-column>
      <el-table-column
        prop="name"
        align="center"
        label="产品名称"
      ></el-table-column>
      <el-table-column align="center" label="更新时间" width="160">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.updateTime) }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="产品类型">
        <template slot-scope="scope">
          {{ transformTarget(productTypes, scope.row.type).label }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="险别">
        <template slot-scope="scope">
          {{ transformTarget(riskTypes, scope.row.risk).label }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="产品渠道">
        <template slot-scope="scope">
          <div
            v-for="item of transformChanel(scope.row.channel)"
            :key="item.value"
          >
            {{ item.label }}
          </div>
        </template>
      </el-table-column>
      <el-table-column align="center" label="文件类型">
        <template slot-scope="scope">
          <div
            v-for="item of transformFile(scope.row.materialType)"
            :key="item.id"
          >
            {{ item.type }}
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="ifShelve" align="center" label="上架状态">
        <template slot-scope="scope">
          {{ scope.row.ifShelve === 0 ? '未上架' : '上架' }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作" fixed="right" width="130">
        <template slot-scope="scope">
          <el-button type="text" @click="editOrAdd(scope.row)">编辑</el-button>
          <el-button type="text" @click="putOnShelf(scope.row)">{{
            scope.row.ifShelve === 0 ? '上架' : '下架'
          }}</el-button>
        </template>
      </el-table-column>
    </el-table>
    <FooterPagination :pagination="pagination"></FooterPagination>
  </Card>
</template>

<script>
import {
  inputMaxLength,
  productTypes,
  riskTypes,
  shelfType,
  productChannel,
  fileList
} from '@/utils/mappingData'
import FooterPagination from './components/FooterPagination'
import {
  getProductList,
  onTheShelf,
  offTheShelf
} from '@/api/productInforManagement'
import { parseTime } from '@/utils/util'

export default {
  components: {
    FooterPagination
  },
  data() {
    return {
      parseTime,
      inputMaxLength,
      productTypes,
      riskTypes,
      shelfType,
      productChannel,
      form: {
        name: '', // 产品名称
        code: '', // 产品编号
        type: '', // 产品类型
        risk: '', // 险别
        ifShelve: '', // 上架状态
        channel: '' // 渠道
      },
      pagination: { size: 10, total: 0, page: 1 },
      tableData: [],
      loading: false
    }
  },
  watch: {
    'pagination.size'() {
      this.handleGetProductList()
    },
    'pagination.page'() {
      this.handleGetProductList()
    }
  },
  mounted() {
    this.handleGetProductList()
  },
  methods: {
    editOrAdd(row) {
      const url = {
        path: 'edit-product'
      }
      if (row.id && row.code) {
        const { id, code } = row
        url.query = { id, code }
      }
      this.$router.push(url)
    },
    submit() {
      if (this.pagination.page === 1) {
        this.handleGetProductList()
      } else {
        this.pagination.page = 1
      }
    },
    onReset() {
      this.form = {
        name: '',
        code: '',
        type: '',
        risk: '',
        ifShelve: '',
        channel: ''
      }
      this.submit()
    },
    async putOnShelf(row) {
      const { ifShelve, code } = row
      if (ifShelve) {
        await offTheShelf({ code })
      } else {
        await onTheShelf({ code })
      }
      this.handleGetProductList()
    },
    async handleGetProductList() {
      try {
        this.loading = true
        const {
          result: { data, totalCount }
        } = await getProductList({
          currPage: this.pagination.page,
          perPage: this.pagination.size,
          name: this.form.name,
          type: this.form.type,
          code: this.form.code,
          risk: this.form.risk,
          channel: this.form.channel,
          ifShelve: this.form.ifShelve
        })
        this.pagination.total = totalCount
        this.tableData = data
      } catch (error) {
        console.log(error)
      } finally {
        this.loading = false
      }
    },
    transformTarget(arr, value) {
      return arr.find(item => item.value === value)
    },
    transformFile(value) {
      if (!value) {
        return [{ id: '', type: '' }]
      }
      const arr = value.split(',')
      const res = arr.map(item => {
        return fileList.find(file => file.id === item - 0)
      })
      return res
    },
    transformChanel(value) {
      const arr = value.split(',')
      const res = arr.map(item => {
        return productChannel.find(chan => chan.value === item - 0)
      })
      return res
    }
  }
}
</script>

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