<template>
  <div id="tPolicyDeclarationList">
    <el-row>
      <el-col :span="24">
        <el-col :span="24" class="search">
          <el-col :span="5">
          <span>筛选条件：</span>
          <el-select v-model="search.current_state" placeholder="请选择审核状态">
            <el-option label="未审核" value="0"></el-option>
            <el-option label="审核通过" value="1"></el-option>
            <el-option label="审核拒绝" value="2"></el-option>
            <el-option label="停用" value="3"></el-option>
          </el-select>
        </el-col>
          <el-col :span="4">
            <span>输入条件：</span>
            <el-input v-model="search.title" :placeholder="placeholder" class="input"></el-input>
          </el-col>
          <!--<el-col :span="7">
            <span>时间选择：</span>
            <el-date-picker v-model="search.date" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"> </el-date-picker>
          </el-col>-->
          <el-col :span="8">
            <el-button class="btnSearch" @click="toQuery">查询</el-button>
            <el-button class="btnSearch qing" @click="toClear">清空</el-button>
          </el-col>
        </el-col>
        <el-col :span="24">
          <el-table
                  ref="tableData"
                  :data="tableData"
                  tooltip-effect="dark"
                  :default-sort="{ prop: 'date', order: 'descending' }"
                  style="width: 100%"
                  @selection-change="handleSelectionChange"
          >
            <!--<el-table-column type="selection" align="center"> </el-table-column>-->
            <el-table-column type="index" label="序号" width="50" align="center"></el-table-column>
            <el-table-column property="title" label="标题" align="center" width="300px"> </el-table-column>
            <el-table-column property="issuing_organ" label="发文机关" align="center"> </el-table-column>
            <!--<el-table-column property="index_number" label="索引号" align="center"> </el-table-column>-->
            <el-table-column property="subject_classification" label="政策等级" align="center"> </el-table-column>
            <!--<el-table-column label="图片" align="center">
              <template slot-scope="scope">
                                <span> <el-image v-if="scope.row.image" :src="scope.row.image" style="height:20px;width:20px "
                                                 @click="showImage(scope.row.image)"></el-image></span>
              </template>
            </el-table-column>-->
            <!--<el-table-column property="issued_number" label="发文字号" align="center"> </el-table-column>-->
            <el-table-column property="subject_headings" label="主题词" align="center"> </el-table-column>
            <!--<el-table-column label="发布日期" align="center">
              <template slot-scope="scope">
                <span>{{ getDate(scope.row.publish_time) }}</span>
              </template>
            </el-table-column>-->
            <el-table-column label="单位" align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.type === '1' ? '金融办' : scope.row.type === '2' ? '其他政府部门' : '工信厅'}}</span>
              </template>
            </el-table-column>
            <el-table-column property="link" label="链接" align="center"> </el-table-column>
            <el-table-column label="审核状态" align="center">
              <template slot-scope="scope">
                <span>{{ getState(scope.row.current_state)}}</span>
              </template>
            </el-table-column>
            <el-table-column property="current_result_description" label="审核意见" align="center"> </el-table-column>
            <el-table-column label="审核时间" align="center">
              <template slot-scope="scope">
                <span>{{ getDate(scope.row.current_state_time) }}</span>
              </template>
            </el-table-column>
            <el-table-column property="current_approval" label="审核人" align="center"> </el-table-column>
            <el-table-column label="操作" align="center" width="150px">
              <template slot-scope="scope">
                <el-button size="mini" type="text" class="other" @click="updateState(scope.row,'-2')" v-if="scope.row.current_state === '0'">审核</el-button>
                <el-button size="mini" type="text" class="other" @click="updateState(scope.row,'3')">停用</el-button>
                <el-button size="mini" type="text" class="edit" icon="el-icon-edit"
                           @click="$router.push({ path: '/tPolicyDeclaration/detail', query: { id: scope.row.id } })"></el-button>
                <!--<el-button size="mini" type="text" class="delete" icon="el-icon-delete"
                           @click.prevent="deleteRow(scope.row.id)"></el-button>-->
              </template>
            </el-table-column>
          </el-table>
          <el-row>
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page.sync="currentPage"
                    :page-sizes="[10, 20, 30, 40]"
                    :page-size.sync="limit"
                    background
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total"
            >
            </el-pagination>
          </el-row>
        </el-col>
      </el-col>
    </el-row>
    <el-dialog
            :visible.sync="dialogVisible"
            width="30%"
    >
      <el-image :src="elImage" style="height:100%;width:100% "></el-image>
    </el-dialog>
    <el-dialog title="审核意见" :visible.sync="dialogFormVisible" width="30%" @open="openDialog">
      <el-input v-model="input" autocomplete="off" placeholder="请输入审核意见"></el-input>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="confirmClick">{{confirm}}</el-button>
        <el-button @click="cancelClick">{{cancel}}</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    name: 'tPolicyDeclarationList',
    props: {
      tableData: null,
      total: null,
    },
    components: {},
    data: () => ({
      placeholder: '请输入标题',
      search: {},
      currentPage: 1,
      limit: 10,
      dialogVisible: false,
      elImage: '',
      tempId:'',
      tempState:'',
      dialogFormVisible: false,
      input:'',
      confirm:'确定',
      cancel:'取消',
    }),
    created() {
    },
    computed: {
    },
    methods: {
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },
      deleteRow(id) {
        this.$confirm('确定删除吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$set(this, `currentPage`, 1);
          this.$emit('deleteRow', {id: id, skip: 0, limit: this.limit, ...this.search});
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      handleSizeChange(val) {
        this.$set(this, `currentPage`, 1);
        this.$emit('select', {skip: 0, limit: val, ...this.search});
      },
      handleCurrentChange(val) {
        this.$emit('select', {skip: (val - 1) * this.limit, limit: this.limit, ...this.search});
      },
      toQuery() {
        this.$set(this, `currentPage`, 1);
        this.$emit('select', {skip: 0, limit: this.limit, ...this.search});
      },
      toClear() {
        let keys = Object.keys(this.search);
        for (const key of keys) {
          this.$set(this.search, `${key}`, '');
        }
      },
      showImage(image) {
        if(image){
          this.$set(this, `elImage`, image);
          this.$set(this, `dialogVisible`, true);
        }else{
          this.$set(this, `dialogVisible`, false);
        }
      },
      getDate(val) {
        if(val){
          return this.format(new Date(Number(val)),'yyyy年MM月dd');
        }
        return '';
      },
      format(date,formatStr){
        formatStr=formatStr.replace(/yyyy|YYYY/,date.getFullYear());
        formatStr=formatStr.replace(/MM/,(date.getMonth()+1)>9?(date.getMonth()+1).toString():'0' + (date.getMonth()+1));
        formatStr=formatStr.replace(/dd|DD/,date.getDate()>9?date.getDate().toString():'0' + date.getDate());
        return formatStr;
      },
      publish(row){
        if(row.publish_state === '1'){
          this.$message.error('已发布');
          return ;
        }
        this.$emit('publish', {row:row,skip: (this.currentPage - 1) * this.limit, limit: this.limit, ...this.search});
  },
      openDialog(){
        this.$set(this, `input`, '');
      },
      confirmClick(){
        this.$set(this, `dialogFormVisible`, false);
        switch(this.tempState)
        {
          case '0':
            break;
          case '1':
            break;
          case '2':
            break;
          case '3':
            this.$emit('updateState', {id:this.tempId,state:this.tempState,result:this.input,skip: (this.currentPage - 1) * this.limit, limit: this.limit, ...this.search});
            break;
          case '-2':
            this.$emit('updateState', {id:this.tempId,state:'1',result:this.input,skip: (this.currentPage - 1) * this.limit, limit: this.limit, ...this.search});
            break;
        }
      },
      cancelClick(){
        this.$set(this, `dialogFormVisible`, false);
        switch(this.tempState)
        {
          case '0':
            break;
          case '1':
            break;
          case '2':
            break;
          case '3':
            break;
          case '-2':
            this.$emit('updateState', {id:this.tempId,state:'2',result:this.input,skip: (this.currentPage - 1) * this.limit, limit: this.limit, ...this.search});
            break;
        }
      },
      updateState(row,state){
        this.$set(this, `tempId`, row.id);
        this.$set(this, `tempState`, state);
        switch(state)
        {
          case '0':
            break;
          case '1':
            break;
          case '2':
            break;
          case '3':
            if(row.current_state === state){
              this.$message.error('已停用');
            }else{
              this.$set(this, `confirm`, '停用');
              this.$set(this, `cancel`, '取消');
              this.$set(this, `dialogFormVisible`, true);
            }
            break;
          case '-2':
            this.$set(this, `confirm`, '审核通过');
            this.$set(this, `cancel`, '审核拒绝');
            this.$set(this, `dialogFormVisible`, true);
            break;
        }
      },
      getState(val) {
        switch(val)
        {
          case '0':
            return '未审核';
          case '1':
            return '审核通过';
          case '2':
            return '审核拒绝';
          case '3':
            return '停用';
        }
      },
    },
  };
</script>

<style lang="less" scoped>
  /deep/ .el-checkbox__input.is-checked .el-checkbox__inner {
    background-color: red;
    border-color: red;
  }

  /deep/ .el-checkbox__input.is-indeterminate .el-checkbox__inner {
    background-color: red;
    border-color: red;
  }

  /deep/ .el-table th {
    background-color: #f5f6fa;
    padding: 8px 0;
  }

  /deep/ .el-table td {
    padding: 11px 0;
  }

  .other {
    color: #f36302;
  }

  .view {
    color: #f36302;
  }

  .edit {
    color: #2ccc02;
  }

  .delete {
    color: #e9021d;
  }

  /deep/ .el-pagination {
    padding: 26px 20px;
  }

  /deep/ .el-pagination.is-background .el-pager li:not(.disabled).active {
    background-color: red;
  }

  .input {
    width: 150px;
  }

  /deep/ .el-input__inner {
    height: 35px;
    line-height: 35px;
  }

  /deep/  .el-table .cell {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .btnSearch {
    width: 80px;
    height: 34px;
    background: rgba(233, 2, 29, 1);
    border-radius: 4px;
    padding: 0;
    color: #fff;
  }

  .qing {
    background: rgba(185, 185, 185, 1);
  }

  .top {
    height: 50px;
    margin: 0 0 10px 0;
  }

  .search {
    background: #ffffff;
    width: 97%;
    height: 35px;
    margin: 20px;
    margin-left: 0px;
  }

  .list {
    padding: 0 20px;
  }
</style>
