<template>
<basic-container>
  <el-menu :default-active="activeIndex" mode="horizontal">
    <el-menu-item index="1">我的消息</el-menu-item>
    <el-menu-item index="2">所有消息</el-menu-item>
  </el-menu>
  <avue-crud :data="data" :option="option" :table-loading="showLoading" :page.sync="page" :permission="permissionList">
    <template slot="picture" slot-scope="scope" >
      <el-button size="small" @click="openPreview(scope)">图片</el-button>
    </template>
    <template slot="cz" slot-scope="scope" >
      <el-button size="small" @click="changeProgres(scope.row)">提交进度</el-button>
    </template>
    <template slot="state" slot-scope="scope" >
      <div class="icon-font">
        <i class="el-icon-success text-success" v-if="scope.row.state == 1"></i>
        <i class="el-icon-warning text-warning" v-if="scope.row.state == 2"></i>
      </div>
    </template>
  </avue-crud>
  <el-dialog :visible.sync="dialogVisible" width="600px" append-to-body :close-on-click-modal="false">
    <div class="flex jc-al-c">
      <span class="mg-r-20 titl-font">提交进度</span>
      <el-select v-model="progres" placeholder="请选择">
        <el-option label="已解决" :value="1"></el-option>
        <el-option label="进入人工预处理环境" :value="2"></el-option>
      </el-select>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
    </span>
  </el-dialog>
</basic-container>
</template>

<script>
  import {mapGetters} from "vuex";
  export default {
    data() {
      return {
        activeIndex:"1",
        curRow:{},
        dialogVisible:false,
        progres:1,

        page:{
          total:1,
          currentPage: 1
        },
        showLoading:false,
        data: [
          {
            time:'2022-05-26 16:20:30',
            remainingTime:'80',
            project:'项目',
            contract:'合同段',
            newType:'消息类型',
            describe:'问题描述',
            picture:[
              {url:'https://img.alicdn.com/tfs/TB1uevcCrj1gK0jSZFuXXcrHpXa-1880-640.jpg'},
              {url:'https://img.alicdn.com/tfs/TB1v28TC8v0gK0jSZKbXXbK2FXa-1880-640.jpg'},
            ],
            state:1,
          }, {
            time:'2022-05-26 16:20:31',
            remainingTime:'79',
            project:'项目',
            contract:'合同段',
            newType:'消息类型',
            describe:'问题描述',
            picture:[
              {url:'https://img.alicdn.com/tfs/TB1uevcCrj1gK0jSZFuXXcrHpXa-1880-640.jpg'},
              {url:'https://img.alicdn.com/tfs/TB1v28TC8v0gK0jSZKbXXbK2FXa-1880-640.jpg'},
            ],
            state:2,
          }
        ],
        option:{
          border:true,
          align:'center',
          menuAlign:'center',
          menu:false,
          column:[
            {
              label:'时间',
              prop:'time',
            },
            {
              label:'剩余反馈用户时间(分钟)',
              prop:'remainingTime'
            },
            {
              label:'项目',
              prop:'project',
            },
            {
              label:'合同段',
              prop:'contract',
            },
            {
              label:'消息类型',
              prop:'newType',
            },
            {
              label:'问题描述',
              prop:'describe',
            },
            {
              label:'图片',
              prop:'picture',
              slot:true,
            },
            {
              label:'操作',
              prop:'cz',
              slot:true,
            },
            {
              label:'处理状态',
              prop:'state',
              slot:true,
            },
          ]
         }
      };
    },
    computed: {
      ...mapGetters(["userInfo"]),

      permissionList() {
        return {
          addBtn: false,
          viewBtn: false,
          delBtn: false,
          editBtn: false
        };
      },
    },
    created() {
      this.init();
      //console.log(this.userInfo)
    },
    methods: {
      init(){

      },
      openPreview(scope,index=0){
        this.$ImagePreview(scope.row.picture, index,{
        closeOnClickModal: true,
        // beforeClose:()=>{
        //   this.$message.success('关闭回调')
        // }
      });
      },
      changeProgres(row){
        this.curRow = row;
        this.dialogVisible = true;
      }
    }
  };
</script>

<style scoped lang="scss">
  .icon-font[class^="icon-"]{
    font-size: 26px !important;
  }
  .titl-font{
    font-size: 32px;
  }
</style>
