<template>
  <div>
    <template v-if="!isBind && !isDetail">
      <p class="info-title">{{ title }}</p>
      <el-divider class="mini-divider-table" />
    </template>

    <!--    玩具详情|关联玩具跳转的详情-->
    <div v-if="isBind || isDetail ">
      <associate-toy-info
        title="关联玩具"
        :form-state="{
          toyBaseInfoId: localBindId || detailId,
          correlationISortId: correlationISortId,
        }"
        :is-detail="isDetail"
        :show-title="true"
        :improved-type="improvedType"
      >
        <template slot="headerOptions">
          <div style="float: right">
            <el-button v-if="isBind" plain size="mini" type="primary" style="float: right" @click="handleResetBind">更换关联</el-button>
            <el-button v-else icon="el-icon-arrow-left" plain size="mini" type="primary" @click="handleBack">返回</el-button>
          </div>
        </template>
      </associate-toy-info>
    </div>
    <div v-else>
      <!--    <div>-->
      <el-form
        ref="queryForm"
        class="standard-form"
        :model="localQueryParams"
        size="small"
        :inline="true"
        label-width="80px"
      >
        <el-form-item label="玩具名称" prop="toyName">
          <el-input v-model="localQueryParams.toyName" placeholder="请输入玩具名称" clearable />
        </el-form-item>
        <el-form-item label="玩具分类" prop="sortCodeList">
          <toy-class-cascader v-model="sortCodeList" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="handleReset">重置</el-button>
        </el-form-item>
      </el-form>
      <j-table
        v-loading="tableLoading"
        :columns="columns"
        :data="toyData"
        :show-selection="false"
        :layout="'prev, pager, next, jumper'"
        :cell-class-name="cellClassName"
        :cell-style="tableCellStyle"
        :pagination.sync="pagination"
        @pagination-change="handleQuery"
        @selection-change="handleSelectionChange"
      >
        <template slot="toyCoverUrl" slot-scope="{ row }">
          <preview-image
            :toy-cover-url="row.toyCoverUrl"
            :uri="(row.kindergartenToyCompressedUrl || row.toyCoverUrl) && row.fileId ? row.kindergartenToyCompressedUrl || row.toyCoverUrl : ''"
            :file-id="row.fileId"
            :to-base="true"
            fit="contain"
          />
        </template>
        <!--        <template slot="toyBrandId" slot-scope="{ row }">-->
        <!--          {{ toyBrandFormatter(row.toyBrandId, brandList) }}-->
        <!--        </template>-->
        <template slot="toySortRelationList" slot-scope="{ row }">
          <table-row-sort :row="row" />
        </template>
        <el-table-column label="操作" align="center" class-name="small-padding fixed-width" fixed="right" :width="140">
          <template slot-scope="{ row }">
            <el-button
              v-hasPermi="['toy:info:edit']"
              size="mini"
              type="text"
              icon="el-icon-view"
              @click.stop="handleView(row)"
            >详情
            </el-button>
            <el-button
              v-if="row.id !== localBindId"
              v-hasPermi="['toy:info:edit']"
              size="mini"
              type="text"
              icon="el-icon-edit"
              @click.stop="handleBind(row)"
            >关联此项
            </el-button>
            <el-button
              v-else
              v-hasPermi="['toy:info:remove']"
              size="mini"
              type="text"
              icon="el-icon-delete"
              @click.stop="handleUnbind(row)"
            >取消关联
            </el-button>
          </template>
        </el-table-column>
      </j-table>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import JTable from '@/components/Table/index.vue'
import PreviewImage from '@/components/PreviewImage.vue'
import { getInfo, listInfo } from '@/api/toy/info'
import { toyBrandFormatter } from '@/utils/formatter'
import ToyClassCascader from '@/components/Cascader/ToyClassCascader.vue'
import associateToyInfo from '@/components/ToyInfo/associateToyInfo.vue'
import { sortTypeToParams, tableCellStyle } from '@/views/toy/utils'
import TableRowSort from '@/views/toy/components/TableRowSort.vue'
import improved from '@/views/toy/improved/index.vue'

export default {
  name: 'ContactToyTable',
  components: {
    TableRowSort,
    ToyClassCascader,
    // BasicInfo,
    associateToyInfo,
    JTable,
    PreviewImage
  },
  props: {
    title: {
      type: String,
      default: '平台玩具查询'
    },
    bindId: {
      type: String,
      default: ''
    },
    queryParams: {
      type: Object,
      default: () => ({
        toyName: '',
        brandId: ''
      })
    },
    improvedType: {
      type: String,
      default: '1'
    },
    // 待核对的幼儿园玩具信息
    correlationISortId: {
      type: Array
    }
    // formState: {
    //   type: Object
    // }
  },
  data() {
    return {
      tableLoading: false,
      isDetail: false, // 是否展示详情页面
      isBind: false, // 是否更换绑定
      toyData: [],
      baseInfo: {}, // 平台端玩具详情
      pagination: {
        pageNum: 1,
        pageSize: 10,
        total: 0
      },
      a: '',
      sortCodeList: [],
      noData: false,
      detailId: [],
      columns: [
        { prop: 'toyCoverUrl', label: '玩具主图', customRender: 'toyCoverUrl', showOverflowTooltip: false },
        { prop: 'toyName', label: '名称', showOverflowTooltip: false },
        { prop: 'toySortRelationList', label: '平台分类', customRender: 'toySortRelationList', align: 'center' }
      ]
    }
  },
  computed: {
    improved() {
      return improved
    },
    ...mapGetters(['brandList']),
    localQueryParams: {
      get() {
        return this.queryParams
      },
      set(val) {
        this.$emit('update:queryParams', val)
      }
    },
    localBindId: {
      get() {
        return this.bindId
      },
      set(val) {
        this.$emit('update:bindId', val)
      }
    }
  },
  watch: {
    localBindId: {
      handler(val) {
        this.isBind = !!val
        if (val) {
          this.getAssociateInfo(val)
          this.handleGetToyInfo({ id: val })
        } else {
          this.handleQuery()
        }
      },
      immediate: true
    },
    noData: {
      handler(val) {
        if (val) {
          this.localBindId = ''
          this.isBind = ''
        }
      }
    }
  },
  methods: {
    sortTypeToParams, tableCellStyle,
    cellClassName(data) {
      if (data.columnIndex === 4) {
        return 'no-padding'
      }
    },
    toyBrandFormatter,
    handleSelectionChange(selection) {
      this.single = selection.length !== 1
      this.multiple = !selection.length
      this.selected = selection
    },
    handleQuery() {
      const params = {
        toyStatus: 0
      }
      const category = this.sortTypeToParams(this.sortCodeList)
      this.tableLoading = true
      listInfo(Object.assign({}, this.pagination, this.localQueryParams, params, category)).then(({ data, total }) => {
        this.toyData = data
        this.pagination.total = total
      }).finally(() => {
        this.tableLoading = false
      })
    },
    handleReset() {
      this.localQueryParams.toyName = ''
      this.sortCodeList = []
      this.pagination.pageNum = 1
      this.handleQuery()
    },
    handleBind(row) {
      this.localBindId = row.id
      this.$emit('bind', row)
    },
    handleUnbind(row) {
      this.localBindId = ''
      this.$emit('unbind', null)
    },
    handleResetBind() {
      this.handleUnbind()
    },
    handleBack() {
      this.isDetail = false
      this.handleQuery()
    },
    handleView(row) {
      this.isDetail = true
      this.handleGetToyInfo(row)
    },
    handleGetToyInfo({ id }) {
      // getInfo(id).then(({ data }) => {
      //   this.baseInfo = data
      // })
      this.detailId = id
    },
    getAssociateInfo(val) {
      getInfo(val).then(({ data, code }) => {
        if (code === 200 && !data) {
          // this.baseInfo = data
          this.noData = true
          this.$emit('noData', true)
        }
      }).finally(() => {
      })
    }
  }
}
</script>

<style scoped lang="scss">
.no-padding {
  padding-top: 0 !important;
}

</style>
