<template>
  <div class="layout">
    <el-table :data="users" style="width: 100%" class="creamtable table" :highlight-current-row="false"  v-loading="loading" :header-cell-class-name="tableHeaderClassName">
      <el-table-column label="">
        <el-table-column prop="id" label="序号" class="test">
        </el-table-column>
      </el-table-column>
      <el-table-column label="公司信息">
        <!-- <el-table-column prop="initPoint" label="期初点数">
        </el-table-column> -->
        <el-table-column prop="name" label="公司注册名称">
        </el-table-column>
        <el-table-column prop="address" label="公司地址">
        </el-table-column>
        <el-table-column label="门店信息">
          <template slot-scope="scope">
            <el-button type="success" size="mini" plain>{{scope.row.type === 1 ? '线下' : (scope.row.type === 2 ? '线上' : '无')}}</el-button>
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column label="申请人信息">
        <el-table-column label="姓名">
          <template slot-scope="scope">
            {{scope.row.surName}}  {{scope.row.userName}}
          </template>
        </el-table-column>
        <el-table-column prop="post" label="职位">
        </el-table-column>
        <el-table-column prop="phone" label="电话">
        </el-table-column>
        <el-table-column prop="email" label="电子邮箱">
        </el-table-column>
      </el-table-column>
      <el-table-column prop="state" label="状态">
        <template slot-scope="scope">
          <el-switch @change="updateAduitStatus(scope.row.id,scope.row.state)" :value="!!scope.row.state" active-color="#13ce66" inactive-color="#ff4949">
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column label="备注">
        <template slot-scope="scope">
          <div @click="makerClick(scope.row)">
            <i class="el-icon-s-flag" style="font-size: 20px;" :style="{color: colors[scope.row.noteType - 1]}" v-if="scope.row.noteType"></i>
            <span v-else>无</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="提交日期" width="200">
        <template slot-scope="scope">
          <div>{{new Date(scope.row.createTime).format('yyyy-MM-dd hh:mm:ss')}}</div>
        </template>
      </el-table-column>
    </el-table>
    <div class="pag-layout" v-if="pag.total">
      <el-pagination :total="pag.total" :current-page="pag.current" :page-size="10" @current-change="handleCurrentChange" layout="total, prev, pager, next, jumper" class="pag">
      </el-pagination>
    </div>

    
    <el-dialog width="750px" title="备注设置" :visible.sync="active">
      <el-form v-if="active" label-width="80px">
        <el-form-item label="标记等级" width="100%">
          <span v-for="(color, i) in colors" :key="i" style="margin-right: 20px;">
            <el-radio :label="i + 1" v-model="active.noteType">
              <i class="el-icon-s-flag" style="font-size: 20px;vertical-align: sub;" :style="{color: color}" ></i>
            </el-radio>
          </span>
        </el-form-item>
        <el-form-item label="备注内容" width="100%">
          <el-input type="textarea" v-model="active.noteContent" :rows="5"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="active = null">取 消</el-button>
        <el-button type="primary" @click="updateMaker">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
// import { request, serverName } from 'api/server'

export default {
  props: ['screen'],
  data () {
    return {
      colors: [
        '#08e2c0', '#39bafe', '#fce439', '#fda000', '#f96d6c'
      ],
      users: [],
      pag: { current: 1 },
      loading: true,
      active: null 
    }
  },
  methods: {
    async updateAduitStatus (id, state) {
      let data = (await this.$http.get('/manager/agentAduit/update/active/'+id+'/'+Number(!state)))
      this.refresh()
    },
    async updateMaker () {
      let data = (await this.$http.post('/manager/agentAduit/update/note', {
        id: this.active.id,
        noteContent: this.active.noteContent,
        noteType: this.active.noteType
      }));
      if (data.code === 0) {
        this.active = null
        this.refresh()
      }
    },
    makerClick (item) {
      this.active = item
    },
    tableHeaderClassName ({ columnIndex, row }) {
      console.log(columnIndex, row)
      if (row.length === 6) {
        if (columnIndex === 1) {
          return 'warning-col head-top-col tab-col'
        } else if (columnIndex === 2) {
          return 'success-col head-top-col tab-col'
        } else {
          return 'head-top-col tab-col'
        }
      } else if (columnIndex >= 1 && columnIndex <= 3) {
        return 'warning-col head-col tab-col'
      } else if (columnIndex >= 4 && columnIndex <= 7) {
        return 'success-col head-col tab-col'
      } else {
        return 'head-col tab-col'
      }
    },
    _exportExcelForService () {
      // let page = this.currentPage;
      let date1, date2
      date1 = this.screen.date1 || null
      date2 = this.screen.date2 || null

      let cameraId = this.screen.cameraId || null

      let fixUrl = '/excel/manageAgentCamera.xlsx'
      let type = 4

      this.$confirm('确定当前标签下的记录?', '导出记录', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.fullscreenLoading = true
        this.$message({
          type: 'info',
          message: '正在下载,请稍等'
        })
        // let status = this.selectValue;
        request['exportExcel']({
          // key：搜索关键词
          date1,
          date2,
          // agentName,
          type,
          cameraId
        }, 'get').then(res => {
          if (res === 1) {
            // window.location.href = "/excel/order.xlsx"
            // console.log(res)
            // this.$alert('请选择充值类型', '提示', {
            //   confirmButtonText: '确定',
            //   callback: action => {

            //   }
            // });

            window.open(serverName + fixUrl + '?rnd=' + Math.random())
            console.log(serverName + fixUrl + '?rnd=' + Math.random())
            // this.fullscreenLoading = false;
          } else {
            this.$alert('导出失败', '提示', {
              confirmButtonText: '确定'

            })
          }
        })
        this.fullscreenLoading = false
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消导出'
        })
        this.fullscreenLoading = false
      })
    },
    goToDetail (name, childName) {
      this.$router.push({ name: 'user-detail', params: {id: name, rid: childName}})
    },
    async getData () {
      let params = Object.assign(this.screen || {}, { page: this.pag.current })
      this.fullscreenLoading = true
      let url = '/manager/agentAduit/list'
      let method = 'get'
      if (params.date1 || params.date2 || params.itemName) {
        url = '/manager/agentAduit/search'
        method = 'post'
      }
      let para = {
        pageNum: params.page,
        pageSize: 10,
        startDate: params.date1,
        endDate: params.date2,
        itemName: params.childName,
        start: "0"
      }
      let data
      if (method === 'get') {
        let paras = []
        Object.keys(para).forEach(k => {
          if (para[k] || typeof para[k] === 'number') {
            paras.push(`${k}=${para[k]}`)
          } else {
            paras.push(`${k}=''`)
          }
        })

        para = paras.join('&')
        
        data = (await this.$http[method](url + '?' + para, )).data
      } else {
        data = (await this.$http[method](url, para)).data
      }

      

      this.isChild = false
      this.total = data.total

      this.users = data.list
      // this.pag.current = params.page + 1
      this.pag.total = data.total
    },
    async getStatistics () {
      let params = Object.assign(
        this.screen, {}
      )
      let data = (await this.$http.post('/manager/camera/searchStatistics', {
        startDate: params.date1,
        endDate: params.date2,
        childName: params.childName
      })).data

      Object.keys(data).forEach(k => {
        this.statistics[k] = data[k]
      })
    },
    async refresh () {
      this.loading = true
      await this.getData()
      this.loading = false
    },
    handleCurrentChange (page) {
      this.pag.current = page
      this.refresh()
    }
  },
  watch: {
    screen () {
      this.pag.current = 1
      this.refresh()
    }
  },
  async mounted () {
    this.loading = true

    this.getData()
    // this.loading = true
    // let result = await Promise.all([
    //   this.$http.post('/showSub'),
    //   this.getData()
    // ])
    // this.statistics = result[0]
    this.loading = false
  }
}

</script>
<style scoped>
/*@import url('./style.css');*/
.el-icon-s-flag {
  cursor: pointer;
}

.layout {
  padding: 15px;
}

.export_btn {
  float: right;
  position: relative;
  top: 40px;
  z-index: 999;
}

.link {
  color: #09e1c0;
  cursor: pointer;
}

.pag-layout {
  overflow: hidden;
  padding: 20px 0 10px;
}

.pag-layout .pag {
  float: right;
}

.data-show {
  padding-top: 35px;
}

.option {
  padding-top: 10px;
}

.option span {
  display: inline-block;
  font-size: 14px;
  color: #999999;
  cursor: pointer;
}

.option span.active {
  color: #333333;
  font-weight: bold;
}

.option span::after {
  content: '/';
  display: inline-block;
  font-size: 14px;
  color: #999999;
  font-weight: normal;
  padding-left: 10px;
  padding-right: 10px;
}

.option span:last-child::after {
  display: none;
}

</style>
<style>
.head-top-col {
  color: #333 !important;
  font-style: italic;
  border: none !important;
}

.warning-col {
  background-color: #fdf5e6 !important
}

.success-col {
  background-color: #f0f9eb !important
}

.creamtable td:nth-child(2),
.creamtable td:nth-child(3),
.creamtable td:nth-child(4)
 {
  background-color: #fdf5e6 !important
}

.creamtable td:nth-child(5),
.creamtable td:nth-child(6),
.creamtable td:nth-child(7),
.creamtable td:nth-child(8),
 {
  background-color: #f0f9eb !important
}

.creamtable .el-table__footer td:nth-child(9) {
  color: #999999;
  text-align: right !important;
}

.normal_btn span {
  color: #09e1c0
}

.order-management-pagination {
  padding: 20px 20px 0;
  position: relative;
  text-align: right;
}

</style>
