<template>
  <ContainerQuery>
    <div v-if="$accessCheck($Access.CommissionRuleAddCommissionRule)" slot="left">
      <el-button size="small" type="primary" @click="infoShow = true">
        新增
      </el-button>
      <!-- <el-button size="small" type="primary" @click="$router.push('/Shareholders/RuleCommission')">
      	新增连锁
      </el-button>
      <el-button size="small" type="primary" @click="$router.push('/Shareholders/RuleCommission')">
      	新增共享股东
      </el-button>
      <el-button size="small" type="primary" @click="$router.push('/Shareholders/RuleCommission')">
      	新增高管
      </el-button> -->
    </div>
    <div slot="more">
      <el-form size="small" :inline="true" >
        <el-form-item>
          <el-input
            v-model="search_form.name"
            placeholder="名称"
            style="width: 220px"
            clearable
            @keyup.enter.native="Lst()"
            @clear="Lst()"
          >
            <el-button
              slot="append"
              icon="el-icon-search"
              @click="Lst()"
            ></el-button>
          </el-input>
          </el-form-item >
        <el-form-item >
         <el-select v-model="search_form.type" placeholder="请选择身份" @change="Lst()">
           <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
           </el-option>
         </el-select>
        </el-form-item>
      </el-form>
    </div>
    <el-table :data="rule_list">
      <el-table-column prop="name" label="名称" show-overflow-tooltip min-width="280">
        <template slot-scope="scope">
          <div class="clearfix">
            <div class="float_left customer-img-view">
              <img v-if="scope.row.avatar" class="customer-img" :src="scope.row.avatar" />
            </div>
            <div class="float_left customer-name-view">
              <p class="customer-name">
                {{ scope.row.name }}
              </p>
              <p> 身份：{{ scope.row.type == 1 ? '招商':(scope.row.type == 2 ? '连锁': (scope.row.type == 3? '共享股东': '高管')) }}
              </p>
            </div>
          </div>
        </template>
      </el-table-column>
      <!-- <el-table-column prop="type" label="身份" show-overflow-tooltip min-width="155">
        <template #default="{ row }">
          {{ row.type == 1 ? '招商':(row.type == 2 ? '连锁': (row.type == 3? '共享股东': '高管')) }}
        </template>
      </el-table-column> -->
      <el-table-column prop="job_no" label="工号" show-overflow-tooltip min-width="100">
        <template #default="{ row }">
          {{ row.job_no ? row.job_no: '--' }}
        </template>
      </el-table-column>
      <el-table-column prop="phone" label="联系方式" show-overflow-tooltip min-width="155">
        <template #default="{ row }">
          {{ row.phone ? row.phone: '--' }}
        </template>
      </el-table-column>
      <el-table-column prop="duties" label="职务" show-overflow-tooltip min-width="155">
        <template #default="{ row }">
          {{ row.duties ? row.duties: '--' }}
        </template>
      </el-table-column>
      <el-table-column prop="business" label="业务" show-overflow-tooltip min-width="155">
        <template #default="{ row }">
          {{ row.business ? row.business: '--' }}
        </template>
      </el-table-column>
      <el-table-column prop="address" label="地址" show-overflow-tooltip min-width="155">
        <template #default="{ row }">
          {{ row.address ? row.address: '--' }}
        </template>
      </el-table-column>
     <!-- <el-table-column prop="createTime" label="添加时间" min-width="140">
        <template #default="{ row }">
          {{ $_common.formatDate(row.createTime) }}
        </template>
      </el-table-column> -->
      <el-table-column prop="name" label="操作" min-width="120">
        <template slot-scope="scope">
          <el-button v-if="$accessCheck($Access.CommissionRuleEditCommissionRule)" type="text" @click="changeRy(scope.row)">
            修改
          </el-button>
          <el-button v-if="$accessCheck($Access.CommissionRuleDelCommissionRule)" type="text"
            @click="delData(scope.row.id)">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <FooterPage :page-size="pageSize" :total-page.sync="total" :current-page.sync="page" @pageChange="pageChange"
      @sizeChange="sizeChange"></FooterPage>
    <InfoAdd v-if="infoShow" :visible="visible" @close="close()" @confirm="infoConfirm"></InfoAdd>
    <infoChange v-if="changeShow" :changedata="change_ry" :visible="visible" @close="closeChange()" @confirm="changeConfirm" ></infoChange>
  </ContainerQuery>
</template>

<script>
  import InfoAdd from "./components/InfoAdd.vue";
  import infoChange from "./components/ChangeRy.vue";
  import {
    getArtList,
    getArtDetail,
    getArtUpdate,
    getZdyRy,
    deleteRy
  } from '@/api/info'

  export default {
    name: "RewardList",
    components: {
      InfoAdd,
      infoChange
    },
    data() {
      return {
        change_ry: {},
        visible: true,
        infoShow: false,
        changeShow: false,
        rule_list: [],
        time: '',
        search_form: {
          type: '',
          name: ''
        },
        total: 0,
        page: 1,
        pageSize: 10,
        options: [{
            value: 1,
            label: '招商'
          },
          {
            value: 2,
            label: '连锁'
          },
          {
            value: 3,
            label: '共享股东'
          },
          {
            value: 4,
            label: '高管'
          }
        ],
      };
    },
    created() {
      this.Lst();
    },
    activated() {
      if (this.$_isInit()) return;
      this.Lst();
    },
    methods: {
      changeConfirm(e) {
       this.Lst()

      },
      changeRy(row) {
        this.change_ry = row
        console.log(this.change_ry,'this.change_ry')
        this.changeShow = true
      },
      close() {
        this.infoShow = false
      },
      closeChange() {
        this.changeShow = false
      },
      infoConfirm() {
        this.Lst();
      },
      pageChange(page) {
        this.page = page;
        this.Lst();
      },
      // 每页数据大小改变
      sizeChange(val) {
        this.pageSize = val;
        this.pageChange(1);
      },
      editData(index) {},
      async Lst() {
        const {
          data,
          pageTotal
        } = await getZdyRy({
          page: this.page,
          pageSize: this.pageSize,
          ...this.search_form
          // createTime: this.search_form.start,
        });
        this.rule_list = data
        this.total = pageTotal;
        console.log(this.rule_list, 'this.rule_list')
      },
      // 删除
      async delData(id) {
        this.$confirm("是否删除?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }).then(async () => {
          const data = await deleteRy({
            id: id
          });

          this.$message({
            type: "success",
            message: "操作成功!",
          });
          this.Lst();
        });
      },
    },
  };
</script>

<style scoped>
  .customer-img-view {
    width: 50px;
    height: 50px;
    background-color: #f4f4f4;
    margin-right: 10px;
    border-radius: 4px;
  }

  .customer-img {
    width: 50px;
    height: 50px;
    border-radius: 4px;
  }
</style>
