<template>
  <el-card shadow="never" class="aui-card--fill">
    <div class="mod-custom__evaluateinfo}">
      <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataListSearch()">
        <el-form-item>
          <el-button type="primary" @click="backToOfficerList">返回</el-button>
        </el-form-item>
        <div>
          <el-form-item label="姓名"><el-input v-model="dataForm.fullName" placeholder="请输入姓名" clearable></el-input></el-form-item>
          <el-form-item label="电话"><el-input v-model="dataForm.mobile" placeholder="请输入电话" clearable></el-input></el-form-item>
        </div>
        <div class="block">
          <el-form-item label="时间"
                        prop="startTime">
            <el-date-picker v-model="dataForm.startTime"
                            type="date"
                            :picker-options="pickerBeginDateBefore"
                            value-format="yyyy-MM-dd"
                            format="yyyy-MM-dd"
                            placeholder="选择日期时间">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="至"
                        label-width="35px"
                        prop="endTime">
            <el-date-picker v-model="dataForm.endTime"
                            type="date"
                            :picker-options="pickerBeginDateAfter"
                            value-format="yyyy-MM-dd"
                            format="yyyy-MM-dd"
                            placeholder="选择日期时间">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="评价状态">
            <el-select v-model="dataForm.roleCode" placeholder="评价状态" clearable=true>
              <el-option v-for="item in roleFlagArr" :key="item.dictValue" :label="item.dictName" :value="item.dictValue">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button @click="getDataListSearch()" type="primary">{{ $t('query') }}</el-button>
          </el-form-item>
        </div>
      </el-form>
      <el-table v-loading="dataListLoading" :data="dataList" border @selection-change="dataListSelectionChangeHandle" style="width: 100%;">
        <el-table-column label="序号" header-align="center" align="center" width="50px">
          <template slot-scope="scope">
            {{scope.$index+1}}
          </template>
        </el-table-column>
        <el-table-column prop="fullName" label="提交人姓名" header-align="center" align="center" width="100"></el-table-column>
        <el-table-column prop="mobile" label="联系电话" header-align="center" align="center" width="120"></el-table-column>
        <el-table-column prop="roleCode" label="评价类别" :formatter="formatState" header-align="center" align="center"></el-table-column>
        <el-table-column prop="createdTime" label="评价时间" header-align="center" align="center"></el-table-column>
        <el-table-column
                v-for="(option) in optionList"
                :key="option.optionId"
                :label="option.optionContent"
                align="center"
                show-overflow-tooltip>
          <template slot-scope="scope">
            <div v-for="(item, index) in scope.row.optionsList" :key="index">
              <div v-if="item.optionId == option.optionId">
                <div v-if="item.selectFlag == 1 && item.roleCode == 1">
                  <img src="@/assets/img/like.png">
                </div>
                <div v-if="item.selectFlag == 1 && item.roleCode == 2">
                  <img src="@/assets/img/oppose.png">
                </div>
                <div v-if="item.selectFlag == 0">—</div>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="anonymousFlag" label="匿名标识" :formatter="formatAnonymousFlag" header-align="center" align="center"></el-table-column>
        <el-table-column prop="content" label="评价内容" :show-overflow-tooltip="true" min-width="400" header-align="center" align="center"></el-table-column>
        <el-table-column :label="$t('handle')" fixed="right" header-align="center" align="center" width="120">
          <template slot-scope="scope">
            <el-button v-if="$hasPermission('custom:evaluateinfo:delete')" type="text" size="small" @click="open(scope.row.content)">{{ '查看内容' }}</el-button>
            <el-button v-if="$hasPermission('custom:evaluateinfo:delete')" type="text" size="small" @click="deleteHandle(scope.row.id)">{{ $t('delete') }}</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        :current-page="page"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="limit"
        :total="total"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="pageSizeChangeHandle"
        @current-change="pageCurrentChangeHandle">
      </el-pagination>
    </div>
  </el-card>
</template>

<script>
import mixinViewModule from '@/mixins/view-module'
export default {
  mixins: [mixinViewModule],
  data () {
    return {
      mixinViewModuleOptions: {
        getDataListURL: '/custom/evaluateinfo/page',
        getDataListIsPage: true,
        deleteURL: '/custom/evaluateinfo',
        deleteIsBatch: true
      },
      dataForm: {
        id: '',
        deptId: '',
        fullName: '',
        mobile: '',
        startTime: '',
        endTime: '',
        roleCode: ''
      },
      roleFlagArr: [],
      optionList: [],
      pickerBeginDateBefore: {
        disabledDate: (time) => {
          let beginDateVal = this.dataForm.startTime
          if (beginDateVal) {
            return time.getTime() > new Date(beginDateVal).getTime()
          }
        }
      },
      pickerBeginDateAfter: {
        disabledDate: (time) => {
          let EndDateVal = this.dataForm.endTime
          if (EndDateVal) {
            return time.getTime() < new Date(EndDateVal).getTime()
          }
        }
      }
    }
  },
  created: function () {
    this.getOptionsList()
    this.getRoleListInfo()
  },
  mounted () {
    this.dataForm.id = this.$route.query.id
    this.dataForm.deptId = this.$route.query.deptId
    this.getDataList()
  },
  methods: {
    open (content) {
      this.$alert(content, '内容', {
        confirmButtonText: '确定',
        callback: action => {}
      })
    },
    getOptionsList () {
      this.$http.get(`/custom/evaluateoption/optionShowList`).then(({ data: res }) => {
        if (res.code !== 0) {
          return this.$message.error(res.msg)
        }
        this.optionList = res.data.optionList
      }).catch(() => {})
    },
    getRoleListInfo () {
      this.$http.get(`/custom/evaluateoption/listSimple`).then(({ data: res }) => {
        if (res.code !== 0) {
          return this.$message.error(res.msg)
        }
        this.roleFlagArr = res.data
      }).catch(() => {})
    },
    backToOfficerList () {
      this.$emit('refreshDataList')
      this.$parent.selectComponent = 'EvaluateOfficerCountList'
      this.$router.push({ path: '/custom-evaluatecount', query: { deptId: this.dataForm.deptId } })
    },
    formatState: function (row) {
      let state = row.roleCode
      if (state === 1) {
        return '点赞'
      } else if (state === 2) {
        return '吐槽'
      }
    },
    formatAnonymousFlag: function (row) {
      let state = row.anonymousFlag
      if (state === '1') {
        return '是'
      } else if (state === '0') {
        return '否'
      }
    }
  }
}
</script>
<style scoped>
.el-date-editor.el-input, .el-date-editor.el-input__inner {
    width: 200px!important;
}
</style>
