<template>
  <div class="container">
    <div style="padding: 0px 20px">
      <div ref="lxHeader">
        <LxHeader icon="md-apps" text="雨管养护管理" style="margin-bottom: 10px; border: 0px; margin-top: 15px">
          <div slot="content"></div>
          <slot>
            <div>
              <Input class="vm10" style="width: 200px; margin-right: 10px" v-model="searchFields.keyword"
                placeholder="关键字搜索" />
              <el-select class="vm10" v-model="searchFields.road_id" filterable remote reserve-keyword clearable
                @focus="remoteRoad" placeholder="请输入关键词查找道路" :remote-method="remoteMethod" :loading="roadloading">
                <el-option v-for="item in roadsList" :key="item.id" :label="item.name" :value="item.id">
                </el-option>
              </el-select>
              <el-select class="vm10" filterable v-model="searchFields.area_id" placeholder="请选择所属片区">
                <el-option v-for="item in selects.areasList" :key="item.id" :label="item.name" :value="item.id">
                </el-option>
              </el-select>
              <el-select class="vm10" filterable v-model="searchFields.maintain_id" placeholder="请选择所属养护单位">
                <el-option v-for="item in selects.maintaingroupList" :key="item.id" :label="item.name" :value="item.id">
                </el-option>
              </el-select>
              <el-select class="vm10" filterable v-model="searchFields.status" placeholder="请选择状态">
                <el-option v-for="item in selects.statusList" :key="item.id" :label="item.name" :value="item.id">
                </el-option>
              </el-select>
              <el-select class="vm10" filterable v-model="searchFields.type" placeholder="请选择类型">
                <el-option v-for="item in selects.typeList" :key="item.id" :label="item.name" :value="item.id">
                </el-option>
              </el-select>
              <el-select class="vm10" filterable v-model="searchFields.end_type" placeholder="请选择结办类型">
                <el-option v-for="item in selects.endTypeList" :key="item.id" :label="item.name" :value="item.id">
                </el-option>
              </el-select>

              <el-select class="vm10" filterable v-model="searchFields.title_id" placeholder="请选择养护内容">
                <el-option v-for="item in allmaintaninList" :key="item.id" :label="item.value" :value="item.id">
                </el-option>
              </el-select>

              <el-date-picker class="vm10" v-model="datesearch" type="daterange" range-separator="至"
                start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd">
              </el-date-picker>
              <Button type="primary" @click="load(false)" style="margin-left: 10px">查询</Button>
              <Button type="primary" @click="edit()" style="margin-left: 10px">新增</Button>
              <Button type="primary" @click="review()" style="margin-left: 10px">批量复核</Button>
              <Button type="primary" @click="exportExcel()" style="margin-left: 10px">导出</Button>
              <!-- <Button type="primary" @click="showMap()" style="margin-left: 10px">当月点位</Button> -->
            </div>
          </slot>
        </LxHeader>
      </div>
      <div ref="lxTable">
        <el-table :data="tableData" class="v-table" @row-click="clickShowInfo" @selection-change="handleSelectionChange"
          :height="tableHeight" style="width: 100%">
          <el-table-column type="selection" fixed width="55"></el-table-column>
          <el-table-column type="index" width="50" fixed label="序号" align="center"> </el-table-column>
          <el-table-column :prop="column.field" :align="column.align" v-for="(column,index) in columns"
            :label="column.title" :width="column.width" :fixed="column.fixed">
            <template slot-scope="scope">
              <div v-if="column.type=='opt'">
                <Button ghost size="small" @click.native.stop="showInfo(scope.row,'showform')" type="primary"
                  style="margin-left: 10px;">查看</Button> <Button v-if="scope.row['status']==0" ghost size="small"
                  @click.native.stop="showInfo(scope.row,'auditform')" type="primary"
                  style="margin-left: 10px;">审核</Button>
                <Button v-if="scope.row['status']==1&&scope.row['end_type']!=1" ghost size="small"
                  @click.native.stop="showInfo(scope.row,'endform')" type="primary"
                  style="margin-left: 10px;">办结</Button>
                <el-popover placement="bottom-start" width="200" trigger="hover"
                  v-if="scope.row['status']!=2&&scope.row['status']!=3&&scope.row['end_type']!=2">
                  <Button v-if="scope.row['status']==0" ghost size="small" @click.native.stop="edit(scope.row)"
                    type="primary" style="margin-left: 10px;">编辑</Button>

                  <Button ghost size="small"
                    v-if="scope.row['status']==0||scope.row['status']==1&&scope.row['end_type']!=1"
                    @click.native.stop="del(scope.row)" type="error" style="margin-left: 10px;">删除</Button>
                  <Button slot="reference" ghost size="small" type="primary" style="margin-left: 10px;">更多</Button>
                </el-popover>
              </div>
              <div v-else-if="column.type=='end_type'">
                <el-tag v-if="scope.row[column.field]==1" type="warning">有</el-tag>
                <el-tag v-else>无</el-tag>
              </div>
              <div v-else-if="column.type=='old_type'">
                <div v-for="item in selects.typeList">
                  <el-tag v-if="scope.row[column.field]==item.id">{{item.name}}</el-tag>
                </div>

              </div>
              <div v-else-if="column.type=='status'">
                <el-tag v-if="scope.row[column.field]==0">待审核</el-tag>
                <el-tag type="success" v-if="scope.row[column.field]==1">已审核</el-tag>
                <el-tag type="warning" v-if="scope.row[column.field]==2">已办结</el-tag>
                <el-tag type="info" v-if="scope.row[column.field]==3">已退回</el-tag>
                <el-tag type="danger" v-if="scope.row[column.field]==4">缺陷办结</el-tag>

              </div>
              <div v-else-if="column.type=='audit_status' && scope.row['status']==2">
                <el-tag v-if="scope.row[column.field]==0">待复核</el-tag>
                <el-tag type="success" v-if="scope.row[column.field]==1">已复核</el-tag>
                <!-- <el-tag type="warning" v-if="scope.row[column.field]==2">未通过</el-tag> -->
              </div>
              <div v-else-if="column.type=='audit_status' && scope.row['status']!=2">
                无
              </div>
              <div v-else-if="column.type=='format'">
                {{scope.row[column.field]?scope.row[column.field].name:""}}
              </div>
              <div v-else-if="column.type=='admin'">
                {{getUserName(scope.row)}}
              </div>
              <div v-else-if="column.type=='maintain'">
                {{getMaintinName(scope.row)}}
              </div>
              <!-- <div v-else-if="column.type=='end_type'">
                    <el-tag v-if="scope.row[column.field]==0">无</el-tag>
                    <el-tag  type="danger" v-if="scope.row[column.field]==1" >违法转办</el-tag>
                </div> -->
              <div v-else>{{scope.row[column.field]}}
              </div>
            </template>
          </el-table-column>
        </el-table>
        <div class="pagination">
          <el-pagination @current-change="handleCurrentChange" :current-page="paginations.page"
            :page-size="paginations.page_size" background layout="prev, pager, next" :total="paginations.total">
          </el-pagination>
        </div>
      </div>
      <el-dialog title="雨管养护类型选择" :visible.sync="rainTypeVisible" width="60%">
        <div class="dialogConcent">
          <el-radio v-model="rainType" :label="1">雨水管道疏挖</el-radio>
          <el-radio v-model="rainType" :label="2">雨水管道疏通</el-radio>
          <el-radio v-model="rainType" :label="3">汛期助排</el-radio>
          <el-radio v-model="rainType" :label="4">污泥外运</el-radio>
          <el-radio v-model="rainType" :label="5">出水口排查</el-radio>
          <el-radio v-model="rainType" :label="6">专项处理</el-radio>
          <el-radio v-model="rainType" :label="7">维修</el-radio>
        </div>

        <div slot="footer" class="dialog-footer">
          <el-button @click="resetrainType()">取 消</el-button>
          <el-button type="primary" v-preventReClick @click="submitRainType()">确认</el-button>
        </div>
      </el-dialog>

      <el-dialog class="common-dialog" title="批量复核" :visible.sync="reviewFormVisible" width="40%">
        <div class="dialogConcent">
          <el-scrollbar style="flex: 1">

            <el-form :model="reviewForm" ref="reviewForm" label-position="right" :label-width="formLabelWidth">
              <el-row>
                <el-col :span="24">
                  <el-form-item label="复核状态" prop="audit_status">
                    <el-select class="width100" v-model="reviewForm.audit_status" placeholder="请选择复核状态">
                      <el-option v-for="item in reviewStatusList" :key="item.id" :label="item.value" :value="item.id">
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item label="备注" prop="audit_reamrk">
                    <el-input type="textarea" v-model="reviewForm.audit_reamrk" placeholder="请填写备注" autocomplete="off">
                    </el-input>
                  </el-form-item>
                </el-col>
              </el-row>

            </el-form>
          </el-scrollbar>
        </div>

        <div slot="footer" class="dialog-footer">
          <el-button @click="reviewFormVisible=false">取 消</el-button>
          <el-button type="primary" v-preventReClick @click="submitReviewForm('reviewForm')">确认</el-button>
        </div>
      </el-dialog>



      <!-- 新增编辑 -->
      <editCirculation ref="editCirculation" @auditSuccess="load"></editCirculation>
      <editMire ref="editMire" @auditSuccess="load"></editMire>
      <!-- 查看 审核 办结 -->
      <showCirculationInfo ref="showCirculationInfo" @auditSuccess="load"></showCirculationInfo>
      <showDischargeInfo ref="showDischargeInfo" @auditSuccess="load"></showDischargeInfo>
      <showMireInfo ref="showMireInfo" @auditSuccess="load"></showMireInfo>



    </div>
  </div>
</template>

<script>
  import {
    listmain,
    get,
    del,
    update,
    review
  } from '../../../api/rain/maintain.js'
  import {
    getToken
  } from '@/utils/auth'
  import {
    listarea
  } from '../../../api/basic/area.js'
  import {
    listroad
  } from '../../../api/basic/road.js'
  import {
    listmaintain
  } from '../../../api/basic/unit.js'
  import {
    getparameteritem
  } from '../../../api/system/dictionary.js'
  import LxHeader from "@/components/LxHeader/index.vue";
  import showCirculationInfo from '@/views/rain/maintain/components/showCirculationInfo'
  import showDischargeInfo from '@/views/rain/maintain/components/showDischargeInfo'
  import showMireInfo from '@/views/rain/maintain/components/showMireInfo'
  import editCirculation from '@/views/rain/maintain/components/editCirculation'
  import editMire from '@/views/rain/maintain/components/editMire'
  import AvueMap from 'avue-plugin-map'
  import {
    getCurrentMonthFirst,
    getCurrentMonthLast
  } from "@/utils/index"

  export default {
    components: {
      LxHeader,
      AvueMap,
      showCirculationInfo,
      showDischargeInfo,
      showMireInfo,
      editCirculation,
      editMire,

    },
    data() {
      return {
        tableHeight: 0,
        formLabelWidth: "120px",
        mapArr: [],
        tableData: [],
        paginations: {
          page: 1,
          page_size: 15,
          total: 0
        },
        tableHeight: 0,
        rainTypeVisible: false,
        rainType: 1,

        datesearch: "",
        baseurl: "",

        searchFields: {
          is_export: 0,
          is_auth: 1
        },
        roadsList: [],
        roadName: "",
        roaddisabled: false,
        roadloading: false,
        selects: {
          areasList: [{
            id: "",
            name: "所有"
          }],
          typeList: [{
            id: "",
            name: "所有"
          }, {
            id: 1,
            name: "雨水管道疏挖"
          }, {
            id: 2,
            name: "雨水管道疏通"
          }, {
            id: 3,
            name: "汛期助排"
          }, {
            id: 4,
            name: "污泥外运"
          }, {
            id: 5,
            name: "出水口排查"
          }, {
            id: 6,
            name: "专项处理"
          }, {
            id: 7,
            name: "维修"
          }],
          statusList: [{
            id: "",
            name: "所有"
          }, {
            id: 0,
            name: "未审核"
          }, {
            id: 1,
            name: "已审核"
          }, {
            id: 2,
            name: "已办结"
          }, {
            id: 3,
            name: "已退回"
          }],
          endTypeList: [{
            id: 0,
            name: "所有"
          }, {
            id: 1,
            name: "养护转办"
          }, {
            id: 2,
            name: "违法转办"
          }],
          maintaingroupList: [{
            id: "",
            name: "所有"
          }],
        },
        maintaninList: [],
        allmaintaninList: [{
          id: "",
          value: "所有"
        }],

        reviewFormVisible: false,
        reviewList: [],
        reviewForm: {
          ids: [],
          audit_status: 0,
          audit_reamrk: ""
        },
        reviewStatusList: [{
          id: 0,
          value: "待复核"
        }, {
          id: 1,
          value: "已复核"
        }],
        columns: [{
            field: "address",
            title: "地址/排放点",
            type: "string",
            align: "left",
            fixed: "left",
            width: 300
          },
          {
            field: "status",
            title: "状态",
            type: "status",
            align: "center",
            fixed: "left",
            width: 100
          },
          {
            field: "created_at",
            title: "上报时间",
            type: "string",
            align: "center",
            fixed: "left",
            width: 180
          },
          {
            field: "audit_status",
            title: "复核状态",
            type: "audit_status",
            align: "center",
            fixed: "left",
            width: 120
          },
          // {
          //   field: "end_type",
          //   title: "结办类型",
          //   type: "end_type",
          //   align: "center",
          //   width:160
          // },
          {
            field: "userName",
            title: "上报人",
            type: "admin",
            align: "center",
            width: 100
          },
          {
            field: "area_info",
            title: "所属片区",
            type: "format",
            align: "center",
            width: 120
          },
          {
            field: "maintain",
            title: "所属养护单位",
            type: "maintain",
            align: "center",
            width: 120
          },
          {
            field: "old_type",
            title: "类型",
            type: "old_type",
            align: "left",
            width: 140
          },
          {
            field: "end_type",
            title: "违法转办",
            type: "end_type",
            align: "center",
            width: 100
          },
          {
            field: "操作",
            title: "操作",
            width: 200,
            type: "opt",
            fixed: "right"
          }
        ],
      }
    },
    created() {
      this.initLoad();
      this.load();

    },
    watch: {
      rainType() {
        this.roadsList = []
      },
      datesearch(newVal, oldVal) {
        if (newVal) {
          this.searchFields.start_date = newVal[0]
          this.searchFields.end_date = newVal[1]
        } else {
          this.searchFields.start_date = ""
          this.searchFields.end_date = ""
        }

      },
      'searchFields.type': function(val) {
        if (val == 1 || val == 2 || val == 3 || val == 5 || val == 6 || val == 7) {
          getparameteritem('maintainContent_' + val).then(res => {
            for (var m of res.detail) {
              this.allmaintaninList.push(m)
            }
          })
        } else {
          this.allmaintaninList = [{
            id: "",
            value: "所有"
          }]
        }
      },
    },
    methods: {
      initLoad() {
        var that = this;
        var clientHeight = document.documentElement.clientHeight
        var lxHeader_height = 96.5; //查询 头部
        var paginationHeight = 37; //分页的高度
        var topHeight = 50; //页面 头部
        let tableHeight = clientHeight - lxHeader_height - topHeight - paginationHeight - 20;
        that.tableHeight = tableHeight;
        that.baseurl = location.host; //process.env.VUE_APP_BASE_API
        // this.uploadOther.token = getToken();
        listarea({
          page: 1,
          page_size: 99
        }).then(res => {

          for (var m of res.data) {
            that.selects.areasList.push({
              id: m.id,
              name: m.name
            })
          }

        })
        listmaintain({
          page: 1,
          page_size: 999,
        }).then(response => {
          for (var m of response.data) {
            this.selects.maintaingroupList.push(m)
          }
        }).catch(error => {
          console.log(error)
          reject(error)
        });
      },
      handleCurrentChange(page) {
        this.paginations.page = page;
        this.load();
      },
      load(is_export) {
        listmain({
          page: this.paginations.page,
          page_size: this.paginations.page_size,
          ...this.searchFields
        }).then(response => {
          let tokens = getToken();
          if (is_export) {
            var url = "/api/admin/rain-maintains/index?token=" + tokens
            for (var m in this.searchFields) {
              url += "&" + m + "=" + this.searchFields[m]
            }
            url = this.baseurl + url
            console.log(url)
            window.open("http://" + url, '_blank')
            this.searchFields.is_export = 0
            return;
          }
          this.tableData = response.data;
          this.paginations.total = response.total;
        }).catch(error => {
          console.log(error)
          reject(error)
        });

      },

      exportExcel() {
        var that = this
        that.searchFields.is_export = 1
        that.load(true)
      },

      handleSelectionChange(val) {
        console.log(val)
        this.reviewList = val
      },
      review() {
        let data = this.reviewList
        let idsArr = [];
        if (data.length > 0) {
          for (var m of data) {
            idsArr.push(m.id)
          }
          this.reviewForm.ids = idsArr
          this.reviewFormVisible = true

        } else {
          this.$message({
            message: '请选择需要复核的信息',
            type: 'warning'
          });
        }
      },
      submitReviewForm() {
        var that = this
        console.log(that.reviewForm);

        review({
          ids: that.reviewForm.ids,
          audit_status: that.reviewForm.audit_status,
          audit_reamrk: that.reviewForm.audit_reamrk
        }).then(response => {
          this.$Message.success('操作成功');
          that.load();
          that.reviewFormVisible = false;
        }).catch(error => {
          console.log(error)
          reject(error)
        });
      },

      remoteRoad() {
        this.roadsList = []
      },
      remoteMethod(query) {
        if (query != '') {
          this.roadloading = true
          listroad({
            name: query
          }).then(res => {
            this.roadloading = false
            this.roadsList = res.data
          })
        } else {
          this.roadsList = []
        }
      },
      resetrainType() {
        this.rainType = 1
        this.rainTypeVisible = false
      },
      submitRainType() {
        var that = this
        this.rainTypeVisible = false
        if (that.rainType == 1 || that.rainType == 2 || that.rainType == 3 || that.rainType == 5 || that.rainType ==
          6 || that.rainType == 7) {
          console.log("a", that.rainType)
          this.$refs.editCirculation.infoId = ""
          this.$refs.editCirculation.rainType = that.rainType
          this.$refs.editCirculation.getInfo()
          this.$refs.editCirculation.isShow = true
        } else if (that.rainType == 4) {
          this.$refs.editMire.infoId = ""
          this.$refs.editMire.getInfo()
          this.$refs.editMire.isShow = true
        }
        that.rainType = 1
      },
      edit(obj) {
        var that = this;
        if (obj) {
          if (obj.old_type == 1 || obj.old_type == 2 || obj.old_type == 3 || obj.old_type == 5 || obj.old_type == 6 ||
            obj.old_type ==
            7) {
            this.$refs.editCirculation.rainType = obj.old_type
            this.$refs.editCirculation.infoId = obj.id
            this.$refs.editCirculation.getInfo(obj.id)
            this.$refs.editCirculation.isShow = true
          } else if (obj.old_type == 4) {
            this.$refs.editMire.infoId = obj.id
            this.$refs.editMire.getInfo(obj.id)
            this.$refs.editMire.isShow = true
          }
        } else {
          this.rainTypeVisible = true
        }

      },
      clickShowInfo(row) {
        this.showInfo(row, 'showform')
      },
      // 查看 审核  办结
      showInfo(obj, formtype) {
        if (obj.old_type == 1 || obj.old_type == 2 || obj.old_type == 6 || obj.old_type == 7 || obj.old_type == 5) {
          this.$refs.showCirculationInfo.isShow = true
          this.$refs.showCirculationInfo.infoId = obj.id
          this.$refs.showCirculationInfo.formType = formtype
          this.$refs.showCirculationInfo.getInfo(obj.id)
        } else if (obj.old_type == 3) {
          this.$refs.showDischargeInfo.isShow = true
          this.$refs.showDischargeInfo.infoId = obj.id
          this.$refs.showDischargeInfo.formType = formtype
          this.$refs.showDischargeInfo.getInfo(obj.id)
        } else if (obj.old_type == 4) {
          this.$refs.showMireInfo.isShow = true
          this.$refs.showMireInfo.infoId = obj.id
          this.$refs.showMireInfo.formType = formtype
          this.$refs.showMireInfo.getInfo(obj.id)
        }
      },
      del(obj) {
        var that = this;
        if (obj) {
          this.$Modal.confirm({
            title: '确认要删除数据？',
            onOk: () => {
              del(obj.id).then(response => {
                this.$Message.success('操作成功');
                that.load();
              }).catch(error => {
                console.log(error)
                reject(error)
              })
            },
            onCancel: () => {
              //this.$Message.info('Clicked cancel');
            }
          });
        }
      },
      getUserName(row) {
        if (row.admin) {
          return row.admin.name;
        } else if (row.user) {
          return row.user.name;
        } else {
          return "未知";
        }

      },
      getMaintinName(row) {
        if (row.user) {
          if (row.user.maintain) {
            return row.user.maintain.name;
          } else {
            return "";
          }

        } else {
          return "";
        }
      },
    }
  }
</script>

<style lang="scss">
  .dialogConcent {
    overflow-y: auto;
  }

  .width100 {
    width: 100%;
  }

  .files_check .el-upload.el-upload--picture-card {
    display: none;
  }

  .vm10 {
    margin-right: 10px;
    margin-bottom: 10px;
    height: 32px;
    vertical-align: bottom;
  }

  .vm10 input {
    height: 32px;
    vertical-align: middle;
  }

  .vm10 .el-select__caret.el-input__icon.el-icon-arrow-up {
    line-height: 30px;
  }

  .vm10 .el-input__icon.el-range__icon.el-icon-date,
  .vm10 .el-range-separator {
    line-height: 25px;
  }

  .selerchcontent button {
    vertical-align: top;
  }
</style>
