<template>
  <el-card shadow="never" class="aui-card--fill">
    <div class="mod-news__itemtimeout}">
        <el-form
                :inline="true"
                :model="dataForm"
                @keyup.enter.native="getDataListSearch()"
        >
          <el-form-item label="所属机构:" label-width="120px">
            <el-cascader
                    v-model="ids"
                    :options="options"
                    :props="{ checkStrictly: true }"
                    clearable
            >
            </el-cascader>
          </el-form-item>
          <el-form-item label="项目编号:" prop="itemCode">
            <el-input
                    v-model="dataForm.itemCode"
                    placeholder="请输入项目编号"
                    clearable
            ></el-input>
          </el-form-item>

          <el-form-item label="项目内容:" prop="itemCode" label-width="100px">
            <el-input
                    v-model="dataForm.itemContent"
                    placeholder="请输入项目内容"
                    clearable
            ></el-input>
          </el-form-item>

          <el-form-item label="项目状态:" label-width="120px">
            <el-select v-model="dataForm.itemState" clearable  placeholder="请选择现在项目状态">
              <el-option label="处理中" value="0"></el-option>
              <el-option label="已关闭" value="5"></el-option>
              <el-option label="已结案" value="10"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="提交人:" prop="itemCode" label-width="72px">
            <el-input
                    v-model="dataForm.nickName"
                    placeholder="请输入提交人"
                    clearable
            ></el-input>
          </el-form-item>

          <el-form-item label="项目统计年月:" prop="itemCode">
            <el-date-picker
                    v-model="dataForm.totalYearMonth"
                    type="month"
                    value-format="yyyy-MM"
                    placeholder="选择月">
            </el-date-picker>
          </el-form-item>
          <div>
          <el-form-item label="项目创建时间:" prop="startTime" label-width="120px">
            <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="25px" 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>
            <el-button type="primary" @click="getDataListSearch()">{{ $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="序号"
                type="index"
                show-overflow-tooltip
                align="center"
                width="50"
        ></el-table-column>
        <el-table-column prop="itemCode" label="项目编号"
                         header-align="center"
                         width="150"
                         show-overflow-tooltip
                         align="center"></el-table-column>
        <el-table-column prop="itemContent"
                         label="项目内容"
                         header-align="center"
                         min-width="400"
                         align="left"
                         show-overflow-tooltip>

        </el-table-column>
        <el-table-column
                prop="itemCreatedTime"
                label="转成项目时间"
                header-align="center"
                width="180"
                align="center"
        ></el-table-column>
        <el-table-column prop="itemState" label="项目状态 "
                         header-align="center"
                         :formatter="itemStatus"
                         width="120"
                         align="center"></el-table-column>
        <el-table-column
                prop="nickName"
                label="提交人"
                header-align="center"
                width="180"
                align="center"
                show-overflow-tooltip
        ></el-table-column>
        <el-table-column
                prop="participantsNum"
                label="参与人数"
                header-align="center"
                width="100"
                align="center"
        ></el-table-column>
        <el-table-column
                prop="approveNum"
                label="支持人数"
                header-align="center"
                width="100"
                align="center"
        ></el-table-column>
        <el-table-column
                prop="opposeNum"
                label="不支持人数"
                header-align="center"
                width="100"
                align="center"
        ></el-table-column>
        <el-table-column
                prop="commentNum"
                label="评论人数"
                header-align="center"
                width="100"
                align="center"
        ></el-table-column>
        <el-table-column
                prop="browseNum"
                label="浏览数"
                header-align="center"
                width="100"
                align="center"
        ></el-table-column>
        <el-table-column :label="$t('handle')" fixed="right" header-align="center" align="center" width="150">
          <template slot-scope="scope">
            <el-button
                    v-if="$hasPermission('events:itemout:deal')"
                    type="text"
                    size="small"
                    @click="dealAction(scope.row.itemId)"
            >{{ $t('look') }}</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>
      <!-- 弹窗, 新增 / 修改 -->
      <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
    </div>
  </el-card>
</template>

<script>
  import mixinViewModule from '@/mixins/view-module'
  import Detail from './item-deal-detail'
  export default {
    mixins: [mixinViewModule],
    name: 'ItemDealList',
    data () {
      return {
        mixinViewModuleOptions: {
          getDataListURL: '/events/item/itemOutPage',
          getDataListIsPage: true
        },
        detailVisible: false,
        dataForm: {
          id: '',
          itemState: '',
          startTime: '',
          endTime: '',
          streetId: '',
          communityId: '',
          gridId: '',
          itemCode: '',
         itemContent:'',
          nickName:"",
          totalYearMonth:'',
        },
        times:[],
        ids: [],
        options: [],
        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()
            }
          }
        }
      }
    },
    components: {
      Detail
    },
    created: function () {
      this.getOptions()
      this.getDataList()
    },
    watch: {
      ids: function (val) {
        if (val.length === 0) {
          this.dataForm.streetId = ''
          this.dataForm.communityId = ''
          this.dataForm.gridId = ''
        }
        if (val.length === 1) {
          this.dataForm.streetId = this.ids[0]
          this.dataForm.communityId = ''
          this.dataForm.gridId = ''
        }
        if (val.length === 2) {
          this.dataForm.streetId = this.ids[0]
          this.dataForm.communityId = this.ids[1]
          this.dataForm.gridId = ''
        }
        if (val.length === 3) {
          this.dataForm.streetId = this.ids[0]
          this.dataForm.communityId = this.ids[1]
          this.dataForm.gridId = this.ids[2]
        }
      }
    },
    methods: {
      dealAction (id) {
        this.$parent.selectComponent = 'ItemTimeOutForm'
        this.$router.push({ path: '/events-item-timeout', query: { id: id } })
      },
      getOptions () {
        this.$http
                .get(`/sys/user/deptOptions/getByLoginUser`)
                .then(({ data: res }) => {
                  if (res.code !== 0) {
                    return this.$message.error(res.msg)
                  }
                  this.options = res.data.options
                })
                .catch(() => {});
      },
      //项目状态判断
      itemStatus(row){
        let itemS = row.itemState;
         if (itemS === '0'){
            return  '处理中'
         }else if (itemS === '5'){
           return  '已关闭'
         }else {
           return  '已结案'
         }
      },
    }
  }
</script>
