<template>
  <div class="mainContainer">
    <div class="mainTableTools">
      <el-row :gutter="20">
        <el-col :span="3">
          <el-select v-model="selectedStatus" placeholder="状态" @change="getList()">
            <el-option
              v-for="(item, index) of statusOptions"
              :key="index"
              :label="item"
              :value="index"
            >
            </el-option>
          </el-select>
        </el-col>
        <el-col :span="9">
          <div class="mainTableTagbox">
            <el-tag>技术服务商总数：<b>{{counter.all}}</b></el-tag>
            <el-tag type="success">正常状态：<b>{{counter.normal}}</b></el-tag>
            <el-tag type="danger">已过期：<b>{{counter.expired}}</b></el-tag>
          </div>
        </el-col>
      </el-row>
    </div>
    <el-table :data="tableData" border >
      <el-table-column prop="uid" label="账户">
        <template slot-scope="scope">
          <span class="lblue point">
            <a target="_blank" :href="scope.row.host+'/rooter/user/'+scope.row.uid">{{scope.row.nickname}}</a>
          </span>
        </template>
      </el-table-column>
      <el-table-column prop="company" label="企业信息">
        <template slot-scope="scope">
          <span class="lblue point">
            <a target="_blank" :href="scope.row.host+'/rooter/companyVerifyAuditItem?uid='+scope.row.uid">{{scope.row.company_name}}</a>
          </span>
        </template>
      </el-table-column>
      <el-table-column prop="start_date" label="入驻时间"></el-table-column>
      <el-table-column prop="end_date" label="到期时间"></el-table-column>
      <el-table-column prop="total_count" label="接单数量"></el-table-column>
      <el-table-column prop="total_draw" label="累计提现金额"></el-table-column>
      <el-table-column prop="status" label="状态">
        <template slot-scope="scope">
          <span :class="'status-' + scope.row.status">{{scope.row.status_name}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="manager_uid" label="对接经理">
        <template slot-scope="scope">
          <span class="lblue point">
            <a target="_blank" :href="scope.row.host+'/rooter/user/'+scope.row.manager_uid">{{scope.row.manager_nickname}}</a>
          </span>
        </template>
      </el-table-column>
      <el-table-column label="备注">
        <template slot-scope="scope">
          <div>{{ scope.row.remark_text }}</div>
          <el-button type="text" @click="onToList(scope.row)">查看备注({{ scope.row.remark_num }})</el-button>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button type="text" @click="onRemark(scope.row)">添加备注</el-button>
        </template>
      </el-table-column>
    </el-table>

    <div class="mainPageBox">
      <el-pagination
        @current-change="changePagination"
        :page-size="20"
        :total="Number(total)"
        layout="total, prev, pager, next"
        background
      ></el-pagination>
    </div>

    <el-dialog title="添加备注" :visible.sync="remarkModel">
      <div>
        <el-input
          type="textarea"
          :rows="5"
          placeholder="请输入内容"
          v-model="remarkData.content">
        </el-input>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="remarkModel = false">取 消</el-button>
        <el-button type="primary" :loading="loading" @click="onRemarkSave">确 定</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>

  export default {
    data() {
      return {
        page: 1,
        total: 0,
        tableData: [],
        counter: {all:0, normal:0, expired:0},
        selectedStatus: 0,
        statusOptions: [],
        remarkModel: false,
        remarkData: {id: '0', content: ''},
        loading:false
      }
    },
    computed: {
      
    },
    mounted() {
      this.getStatus();
      this.getList();
    },
    methods: {
      getStatus() {
        this.statusOptions = ['全部', '正常', '已过期'];
      },
      async getList() {
        const data = {
          page: this.page,
          status: this.selectedStatus
        };
        let res = await this.$post("/api/admin/vip/getCompanyVips", data);
        if (res && res.status === 1) {
          this.tableData = res.data.list;
          this.counter = res.data.counter;
          this.total = res.data.total;
        }
      },

      changePagination(val) {
        this.page = val;
        this.getList();
      },

      onRemark(row) {
        this.remarkData.id = row.id;
        this.remarkModel = true;
      },
      onToList(row) {
        let data = {
          obj_id: row.id,
          type: 8
        }
        this.$router.push({path: '/main/remark_list', query: data});
      },
      async onRemarkSave() {
        this.loading = true;
        if (this.remarkData.content === '' || this.remarkData.id === '0') {
          this.$message.error('请输入内容')
          this.loading = false
          return false
        }

        let data = {content: this.remarkData.content, id: this.remarkData.id}
        let res = await this.$post("/api/admin/vip/saveRemark", data);
        if (res && res.status === 1) {
          this.$message.success('备注成功')
          this.remarkModel = false
          this.getList()
        }
        this.loading = false
      },

    }
  };
</script>

<style scoped>
  .status-1 {
    color:#67C23A;
  }
  .status-0 {
    color:#F56C6C;
  }
</style>