<!--
 * @Descripttion: 指标设置
 * @version: 1.0.0
 * @Author: 无尘
 * @Date: 2020-11-09 10:05:27
 * @LastEditors: 无尘
 * @LastEditTime: 2020-11-09 10:26:18
-->
<!--  -->
<template>
  <div class="common-app-right" style="padding: 0" v-loading="loading">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="已设置指标门店" name="first"></el-tab-pane>
      <el-tab-pane label="未设置指标门店" name="second"></el-tab-pane>
    </el-tabs>

    <div class="list-content">
      <div class="content-search">
        <div>
          <el-input
            v-model.trim="search.input"
            placeholder="请输入名称/code"
            prefix-icon="el-icon-search"
            @keydown.enter.native="searchStrategy"
            clearable
            @change="searchStrategy">
          </el-input>

          <el-select v-model="search.date" placeholder="选择年份" style="width: 128px"></el-select>

          <span v-show="activeName === 'first'">
            <el-select v-model="search.type" placeholder="全部指标类型">
              <el-option label="业绩指标日权重" value="1"></el-option>
              <el-option label="业绩指标日指标" value="2"></el-option>
              <el-option label="新增会员日权重" value="3"></el-option>
              <el-option label="新增会员日指标" value="4"></el-option>
            </el-select>

            <el-select v-model="search.auth" placeholder="全部编辑权限">
              <el-option label="店长可编辑" value="1"></el-option>
              <el-option label="店长不可编辑" value="0"></el-option>
            </el-select>

          </span>

          <el-select v-model="search.state" style="width: 106px;margin-right: -1px">
            <el-option label="门店分组" value="1"></el-option>
            <el-option label="门店标签" value="2"></el-option>
          </el-select>

          <el-select v-model="search.store" placeholder="选择门店分组"></el-select>

        </div>

        <el-select placeholder="操作" @change="batchOperation">
          <el-option label="新增指标" :value="1"></el-option>
          <el-option label="编辑指标" :value="2"></el-option>
          <el-option label="修改编辑权限" :value="3"></el-option>
        </el-select>
      </div>

      <div class="content-data">
        <div>
          <span class="color2">年业绩指标：¥ </span>
          <span class="color1">100,000</span>
          <span class="color2">年新增会员指标：¥  </span>
          <span class="color1">100,000</span>
        </div>

        <span v-show="activeName === 'second'">
          <el-checkbox v-model="search.noPerformanceFlag" :true-label="1" :false-label="0">未设置业绩指标门店</el-checkbox>
          <el-checkbox v-model="search.noAddMemberFlag" :true-label="1" :false-label="0">未设置新增会员指标门店</el-checkbox>
        </span>
      </div>

      <el-table
        :data="tableData"
        style="width: 100%"
        ref="multipleTable"
        @selection-change="handleSelectionChange">

        <el-table-column type="selection" width="55"></el-table-column>

        <el-table-column prop="date" label="门店"></el-table-column>
        <el-table-column prop="date" label="年业绩指标"></el-table-column>
        <el-table-column prop="date" label="年新增会员指标"></el-table-column>
        <el-table-column prop="date" label="编辑权限"></el-table-column>
        <el-table-column prop="date" label="更新时间"></el-table-column>
        <el-table-column prop="date" label="提交人"></el-table-column>

        <el-table-column prop="date" label="操作">
          <template>
            <el-button type="text">编辑</el-button>
            <el-button type="text">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <dm-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page.currentPage"
        :page-sizes="[20, 40, 60, 80]"
        :page-size="page.pageSize"
        layout="total, sizes, prev, pager, next"
        :total="page.total"
        style="text-align:right">
      </dm-pagination>
    </div>
  </div>
</template>

<script>
export default {
  name: 'QuotaSet',
  components: {},
  data() {
    return {
      activeName: '',

      search: {
        input: '',
        date: '',
        type: '',
        auth: '',
        state: '1',
        store: '',
        noPerformanceFlag: '0',
        noAddMemberFlag: '0'
      },

      multipleSelection: [],
      tableData: [],
      loading: false,
      page: {
        currentPage: 1,
        pageSize: 20,
        total: 0
      }
    };
  },

  created() {
    const { tab } = this.$route.query;
    this.activeName = tab || 'first';
    console.log(this);
  },
  // 生命周期 - 挂载完成（访问DOM元素）
  mounted() {
    this.$emit('showTab', '/quota-set');
    this.$emit('change-nav', [ { name: '指标设置' } ]);
  },

  // methods
  methods: {
    batchOperation(val) {
      console.log(val);
    },

    handleSelectionChange(val) {
      this.multipleSelection = val;
    },

    handleClick({ name }) {
      console.log(name);
    },

    handleSizeChange(val) {
      this.page.pageSize = val;
      this.page.currentPage = 1;
      // this.getList();
    },

    handleCurrentChange(val) {
      this.page.currentPage = val;
      // this.getList();
    }
  },
  watch: {}
};
</script>
<style lang='less' scoped>
.list-content {
  padding: 5px 20px 20px;
  .el-input {
    width: 180px;
    margin-right: 10px;
  }
  .el-select {
    width: 148px;
    margin-right: 10px;
  }
  .el-date-picker {
    margin-right: 10px;
  }
}
// .el-select .el-input.is-focus .el-input__inner {
//   z-index: 2;
// }
.content-search {
  display: flex;
  justify-content: space-between;
}
.content-data {
  display: flex;
  justify-content: space-between;
  margin: 20px 0;
}
.color1 {
  color: #303133;
  font-size: 16px;
  padding-right: 15px;
  font-weight: 500;
}
.color2 {
  position: relative;
  color: #606266;
  font-size: 14px;
  font-weight: 400;
  &:not(:first-of-type) {
    padding-left: 16px;
    &::before {
      content: '|';
      position: absolute;
      top: 0;
      left: 0;
      color: #DCDFE6;
    }
  }
}
</style>
