<template>
  <div class="app-container">
    <template v-if="!isShowDetail">
      <div class="tab-container clearfix">
        <div class="tab-list fl">
          <div class="item" :class="screenForm.status === '' ? 'current' : ''" @click="changeType('')">
            全部({{ downCount + upCount || 0 }})
          </div>
          <div class="item" :class="screenForm.status ? 'current' : ''" @click="changeType(true)">
            租赁中({{ upCount || 0 }})
          </div>
          <div class="item" :class="screenForm.status === false ? 'current' : ''" @click="changeType(false)">
            已下架({{ downCount || 0 }})
          </div>
        </div>
        <el-button type="primary" size="small" @click="addOrEdit('add')">添加商品</el-button>
      </div>

      <div class="screen2-container">
        <el-row :gutter="20">
          <el-col :xs="24" :sm="2" :lg="3" style="opacity: 0">.</el-col>

          <el-col :xs="24" :sm="20" :lg="18">
            <el-form ref="form" :model="screenForm" label-width="80px">
              <div class="search">
                <el-input
                  v-model="screenForm.keyword"
                  placeholder="想快速搜索什么商品呢？输入商品名称，商品id，商品分类都可快速找到"
                  class="input-with-select"
                  clearable
                  @change="getListByScreen"
                >
                  <el-button slot="append" icon="el-icon-search" @click="getListByScreen"></el-button>
                </el-input>
              </div>
              <div class="screen clearfix">
                <el-row :gutter="20">
                  <el-col :xs="12" :sm="12" :lg="4">
                    <el-form-item label="商品分类：" label-width="90px">
                      <el-cascader
                        v-model="screenForm.classify"
                        :options="classifyList"
                        :props="{ label: 'name', value: 'categoryId' }"
                        size="small"
                        @change="getListByScreen"
                      >
                      </el-cascader>
                    </el-form-item>
                  </el-col>
                  <el-col :xs="12" :sm="12" :lg="8">
                    <el-form-item label="租赁订金：" label-width="90px">
                      <el-input v-model="screenForm.price1" size="small" @change="getListByScreen" clearable></el-input>
                      <span>至</span>
                      <el-input v-model="screenForm.price2" size="small" @change="getListByScreen" clearable></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :xs="12" :sm="12" :lg="8">
                    <el-form-item label="租赁价格：" label-width="90px">
                      <el-input
                        v-model="screenForm.amount1"
                        size="small"
                        @change="getListByScreen"
                        clearable
                      ></el-input>
                      <span>至</span>
                      <el-input
                        v-model="screenForm.amount2"
                        size="small"
                        @change="getListByScreen"
                        clearable
                      ></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
              </div>
            </el-form>
          </el-col>

          <el-col :xs="24" :sm="2" :lg="3" style="opacity: 0">.</el-col>
        </el-row>
      </div>

      <div class="mymain-container">
        <div class="table">
          <el-table
            v-loading="listLoading"
            :data="dataList"
            element-loading-text="Loading"
            border
            fit
            highlight-current-row
            stripe
            @selection-change="handleTableSelection"
          >
            <el-table-column align="center" type="selection" width="55" fixed></el-table-column>
            <el-table-column align="center" label="一级分类图片" prop="imgUrl" width="85">
              <template slot-scope="scope">
                <el-image
                  style="width: 60px; height: 60px; display: block"
                  :src="$showImgUrl(scope.row.categoryUrl)"
                  :preview-src-list="[$showImgUrl(scope.row.categoryUrl)]"
                  fit="cover"
                ></el-image>
              </template>
            </el-table-column>
            <el-table-column align="center" label="商品ID" prop="id" min-width="200"></el-table-column>
            <el-table-column align="center" label="商品名称" prop="name" min-width="200"></el-table-column>
            <el-table-column align="center" label="租赁价格(元/月)" prop="leasePrice" min-width="200"></el-table-column>
            <el-table-column
              align="center"
              label="租赁订金(元/月)"
              prop="depositPrice"
              min-width="200"
            ></el-table-column>
            <el-table-column align="center" label="排序" prop="sort" min-width="110" sortable>
              <template slot-scope="scope">
                <!-- {{ scope.row.sortNum }} -->
                <span style="margin-right: 10px">{{ scope.row.sort }}</span>
                <i class="el-icon-edit pointer" @click="editData('sort', scope.row)"></i>
              </template>
            </el-table-column>
            <el-table-column align="center" label="状态" class-name="status-col">
              <template slot-scope="scope">
                <div style="display: flex; flex-wrap: wrap; align-items: center; justify-content: center">
                  <el-tag size="small" :type="scope.row.status ? 'success' : 'danger'">{{
                    scope.row.status ? '上架' : '下架'
                  }}</el-tag>
                </div>
              </template>
            </el-table-column>
            <el-table-column align="center" label="操作" width="280" fixed="right">
              <template slot-scope="scope">
                <el-button v-if="$restrict('edit')" type="primary" size="mini" @click="addOrEdit('edit', scope.row.id)"
                  >编辑</el-button
                >
                <el-button
                  v-if="$restrict('copyLink')"
                  type="primary"
                  size="mini"
                  class="tag-read"
                  @click="copy(scope.row.id)"
                  :data-clipboard-text="scope.row.id"
                  >复制链接</el-button
                >
                <el-popconfirm
                  v-if="$restrict('del')"
                  style="margin-left: 10px"
                  title="确定删除吗？"
                  @confirm="delItem(scope.row.id)"
                >
                  <el-button v-if="!scope.row.status" slot="reference" size="mini">删除</el-button>
                </el-popconfirm>
              </template>
            </el-table-column>
          </el-table>
        </div>

        <div class="pagination clearfix">
          <div class="fr">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage"
              :page-sizes="[10, 20, 50, 100]"
              :page-size="10"
              layout="total, sizes, prev, pager, next, jumper"
              :total="listTotal"
            >
            </el-pagination>
          </div>
        </div>
      </div>
    </template>
    <template v-else>
      <detail @back="backList" :title="'租赁产品' + formTypeItems[formType]" :id="id" :formType="formType"></detail>
    </template>
  </div>
</template>

<script>
import { getList, del, getClassifyList, getGoodsStateCount, getDetail, save } from '@/api/tenancyProduct'
import Clipboard from 'clipboard'
import detail from './detail'
import { EventBus } from '@/utils/eventBus'
export default {
  components: { detail },
  data() {
    return {
      dataList: null, // 列表数据
      isShowDetail: false,
      listLoading: true, // 列表加载loading
      currentPage: 1, // 当前页码
      pageSize: 10, // 每页数量
      listTotal: 0, // 列表总数
      screenForm: {
        status: '',
        keyword: '',
        classify: '',
        status: '',
        price1: '',
        price2: '',
        amount1: '',
        amount2: ''
      },
      select_status: [
        // 筛选字段 - 状态
        {
          label: '上架',
          value: true
        },
        {
          label: '下架',
          value: false
        }
      ],
      classifyList: [],
      upCount: 0,
      downCount: 0,
      id: '',
      formType: 0,
      formTypeItems: ['新增', '编辑'],
      tableSelection: []
    }
  },
  created() {
    this.getClassifyList()
    this.getList()
    EventBus.$on('updateGoodsListPage', () => {
      this.getList()
    })
  },
  methods: {
    getClassifyList() {
      let params = {
        name: '',
        status: true
      }
      getClassifyList(params).then(res => {
        res.data.unshift({
          name: '全部',
          categoryId: '',
          children: null
        })
        this.classifyList = res.data
      })
    },

    backList() {
      this.id = ''
      this.isShowDetail = false
      this.getListByScreen()
    },

    getList() {
      this.listLoading = true

      let categoryId = ''
      if (this.screenForm.classify) {
        categoryId = this.screenForm.classify[1]
      }

      let params = {
        status: this.screenForm.status,
        keyword: this.screenForm.keyword,
        categoryId: categoryId,
        status: this.screenForm.status,
        startDeposit: this.screenForm.price1,
        endDeposit: this.screenForm.price2,
        startPrice: this.screenForm.amount1,
        endPrice: this.screenForm.amount2,
        pageNum: this.currentPage,
        pageSize: this.pageSize
      }

      getList(params).then(res => {
        this.dataList = res.data.records
        this.listTotal = res.data.total
        this.listLoading = false
      })

      getGoodsStateCount({}).then(res => {
        this.downCount = res.data.downCount
        this.upCount = res.data.upCount
      })
    },

    async editData(type, item) {
      let params = {}
      await getDetail({ id: item.id }).then(res => {
        params = res.data
      })
      this.$prompt('请输入排序', '编辑', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputValue: item.sort,
        promptObj: {
          inputType: 'number',
          inputValidator: function (value) {
            if (!value && value !== 0) return '请输入排序'
            if (value * 1 < 0) return '排序不能小于0'
          }
        }
      })
        .then(({ value }) => {
          params[type] = value
          save(params).then(res => {
            this.$successMsg('编辑成功')
            this.getList()
          })
        })
        .catch(() => {})
    },

    // 更改每页数量
    handleSizeChange(val) {
      this.pageSize = val
      this.currentPage = 1
      this.getList()
    },

    // 更改当前页
    handleCurrentChange(val) {
      this.currentPage = val
      this.getList()
    },

    // 筛选后重新获取列表
    getListByScreen() {
      this.currentPage = 1
      this.getList()
    },

    // 切换类型
    changeType(status) {
      this.screenForm.status = status
      this.getListByScreen()
    },

    // 删除商品
    delItem(id) {
      del([id]).then(res => {
        this.getList()
        this.$successMsg()
      })
    },

    // 添加商品
    addOrEdit(type, id) {
      if (id) {
        this.id = id
      }
      this.formType = id ? 1 : 0
      this.isShowDetail = true
    },

    copy() {
      const clipboard = new Clipboard('.tag-read')
      // clipboard.on('success', e => {
      //   this.$successMsg('复制成功');
      // })
      clipboard.on('error', e => {
        console.log('该浏览器不支持复制')
        return false
      })
      this.$successMsg('复制成功')
    },

    // 表格选择列
    handleTableSelection(val) {
      this.tableSelection = val
    }
  }
}
</script>

<style scoped lang="scss">
.tab-container {
  .tab-list {
    .item {
      float: left;
      font-size: 14px;
      margin-right: 20px;
      cursor: pointer;
      line-height: 32px;

      &.current {
        color: #409eff;
      }
    }
  }
}

.screen2-container {
  .search {
    margin-top: 30px;
  }

  .screen {
    margin-top: 20px;

    .el-input {
      width: 40%;
    }

    span {
      width: 20%;
      display: inline-block;
      text-align: center;
      color: #666666;
    }
  }
}

.pointer {
  cursor: pointer;
  color: #409eff;
}
</style>

<style lang="scss">
.screen2-container {
  .el-form-item__label {
    line-height: 32px;
  }

  .el-form-item__content {
    line-height: 32px;
  }
}

.el-image-viewer__wrapper .el-icon-circle-close {
  color: #ffffff !important;
  font-size: 60px;
}
</style>
