<template>
  <div class="variety-list-page">
    <div class="top">
      <el-button type="primary" @click="addVarietyHandle(null)" v-if="isCanAdd">添加品种</el-button>
      <div class="top-right">
        <el-checkbox v-model="isCanAnalyse" @change="pageChangeHandle(1)" v-if="!isCanAdd">只看可分析</el-checkbox>
        <el-input
          placeholder="品种名称/指标ID"
          v-model="searchTxt"
          style="width:350px;margin-left: 15px;"
          @keyup.enter.native="getTableList"
          clearable>
          <i slot="prefix" class="el-input__icon el-icon-search"/>
        </el-input>
      </div>
    </div>

    <div class="min">
      <el-table
        :data="varietyList"
				border
      >
        <el-table-column
          v-for="item in tableColums"
          :key="item.key"
          :label="item.label"
          :width="item.widthsty"
          :min-width="item.minwidthsty"
          align="center"
        >
          <template slot-scope="{row}">
            <span v-if="item.key==='VarietyName'" class="editsty" @click="analyseVarietyHandle(row,'look')">{{row[item.key]}}</span>
            <span v-else>{{row[item.key]}}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="{row}">
            <el-button type="text" @click="analyseVarietyHandle(row)" v-if="row.Button.Analyse">分析</el-button>
            <el-button type="text" @click="addVarietyHandle(row)" v-if="row.Button.Edit">编辑</el-button>
            <span class="deletesty" @click="delHandle(row)" style="margin-left: 10px;" v-if="row.Button.Delete">删除</span>
          </template>
        </el-table-column>
        <div slot="empty" style="padding: 20px 0">
          <tableNoData text="暂无品种" size="mini"/>
        </div>
      </el-table>
      <div style="height:40px;margin-top: 20px;">
        <m-page
          :page_no="pageNo"
          :pageSize="pageSize"
          :total="total"
          @handleCurrentChange="pageChangeHandle"
        />
      </div>
    </div>

    <!-- 添加品种 -->
    <varietySetDia
      :isShow.sync="isOpenVarietySet"
      :form="varietyForm"
      @successBack="() => { pageChangeHandle(1) }"
    />
  </div>
</template>

<script>
import * as supplyApi from '@/api/modules/supplyApi.js';
import varietySetDia from './components/varietySetDia.vue'
import mPage from '@/components/mPage.vue'
export default {
  components: { mPage,varietySetDia },
  data() {
    return {
      searchTxt: '',
      isCanAdd: false,
      isCanAnalyse: false,
      tableColums: [
        {
          label: '品种',
          key: 'VarietyName'
        },
        {
          label: '更新人',
          key: 'LastUpdateSysUserRealName'
        },
        {
          label: '更新时间',
          key: 'ModifyTime'
        },
      ],
      varietyList: [],
      pageNo: 1,
      pageSize: 10,
      total: 0,

      //添加品种弹窗
      isOpenVarietySet: false,
      varietyForm: {}
    }
  },

  methods: {
    async getTableList() {
      const res = await supplyApi.varietyList({
        IsAnalyse: this.isCanAnalyse,
        Keyword: this.searchTxt,
        CurrentIndex: this.pageNo,
        PageSize: this.pageSize
      });
      if(res.Ret !== 200) return
      this.isCanAdd = res.Data.AddButton;
      this.total = res.Data.Paging.Totals;
      this.varietyList = res.Data.List || [];
    },

    pageChangeHandle(page) {
      this.pageNo = page;
      this.getTableList();
    },
    
    analyseVarietyHandle(row,type='') {
      this.$router.push({
        path:'/analyseVariety',
        query:{id:row.VarietyId,type}
      })
    },

    /* 添加品种 */
    addVarietyHandle(row=null) {
      this.isOpenVarietySet = true;
      this.varietyForm = row || {};
    },

    /* 删除 */
    async delHandle({VarietyId}) {
      await this.$confirm('删除后不可恢复,确认删除吗?','提示',{ type: 'warning' });
      const res = await supplyApi.delVariety({VarietyId})

      if(res.Ret !== 200) return
      this.pageChangeHandle(1); 
    }
  },
  mounted() {
    this.getTableList()
  }
}
</script>

<style lang="scss" scoped>
.variety-list-page {
  min-height: calc(100vh - 180px);
  padding: 20px 30px;
  background: #fff;
  border: 1px solid #ececec;
  border-radius: 4px;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.05);
  .top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    .top-right {
      display: flex;
      align-items: center;
    }
  }
}
</style>