<template>
  <ai-detail class="reportAtWillDetail" v-loading="isLoading">
    <template #title>
      <ai-title title="随手拍详情" isShowBack isShowBottomBorder  @onBackClick="cancel(false)">
        <template #rightBtn>
          <div class="title-btns">
            <el-button type="primary" icon="iconfont iconPerson_Transfered" @click="isShowForward = true" v-if="detail.eventStatus < 2">指派事件</el-button>
            <el-button type="primary" icon="iconfont iconRegister" @click="isShowAdd = true" v-if="detail.eventStatus < 2">处理事件</el-button>
          </div>
        </template>
      </ai-title>
    </template>
    <template #content>
      <div class="detail-content__wrapper">
        <ai-card class="detail-content__wrapper--left" title="基础信息">
          <template #content>
            <ai-wrapper>
              <ai-info-item label="上报人员" :value="detail.name"></ai-info-item>
              <ai-info-item label="当前状态" :value="dict.getLabel('clapEventStatus', detail.eventStatus)"></ai-info-item>
              <ai-info-item label="联系方式">{{ detail.phone }}</ai-info-item>
              <ai-info-item label="上报时间">{{ detail.createTime }}</ai-info-item>
              <ai-info-item label="事件类型">{{ detail.groupName }}</ai-info-item>
              <ai-info-item label="事件描述" isLine>{{ detail.content }}</ai-info-item>
              <ai-info-item label="现场照片" isLine>
                <ai-uploader :instance="instance" disabled v-model="detail.files"></ai-uploader>
              </ai-info-item>
              <ai-info-item label="所属网格">{{ detail.girdName }}</ai-info-item>
              <ai-info-item label="事件位置" isLine>
                <div id="map" style="width: 500px; height: 280px;"></div>
              </ai-info-item>
            </ai-wrapper>
          </template>
        </ai-card>
        <div class="rightZone">
          <ai-card title="办理进度">
            <template #content>
              <el-steps direction="vertical" :active="1">
                <el-step
                  v-for="(item, i) in processList"
                  :key="i"
                  :title="item.systemExplain"
                  :description="item.doTime">
                  <template #title>
                    <h2 class="step-title" style="font-weight: 500; font-size: 14px;">
                      {{ item.systemExplain }}
                    </h2>
                  </template>
                  <template #description>
                    <p style="color: #888; margin: 0 4px 10px 0; font-size: 14px;">{{ item.doTime }}</p>
                    <div style="color: #444;margin-bottom: 10px;" v-if="item.doExplain">{{ item.doExplain }}</div>
                    <ai-uploader :instance="instance" disabled v-model="item.files"></ai-uploader>
                  </template>
                </el-step>
              </el-steps>
            </template>
          </ai-card>
        </div>
      </div>
      <ai-dialog
        :visible.sync="isShowAdd"
        width="800px"
        title="事件处理"
        @closed="onClose"
        @onConfirm="handleEvent">
        <el-form class="ai-form" label-width="120px" :model="form" ref="form">
          <el-form-item label="事件分类" prop="groupId" style="width: 100%;" :rules="[{ required: true, message: '请选择事件分类' }]">
            <ai-select
              v-model="form.groupId"
              placeholder="请选择事件分类"
              :selectList="dictList">
            </ai-select>
          </el-form-item>
          <el-form-item label="处理结果" prop="eventStatus" style="width: 100%;" :rules="[{ required: true, message: '请选择处理结果' }]">
            <el-radio-group v-model="form.eventStatus">
              <el-radio label="2">已办结</el-radio>
              <el-radio label="3">已拒绝</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="处理意见" prop="content" style="width: 100%;" :rules="[{ required: true, message: '请输入处理意见' }]">
            <el-input type="textarea" :rows="5" :maxlength="500" v-model="form.content" clearable placeholder="请输入处理意见" show-word-limit></el-input>
          </el-form-item>
          <el-form-item label="图片" prop="files" style="width: 100%;">
            <ai-uploader
              :instance="instance"
              isShowTip
              v-model="form.files"
              :limit="9">
            </ai-uploader>
          </el-form-item>
        </el-form>
      </ai-dialog>
      <ai-dialog
        :visible.sync="isShowForward"
        width="800px"
        @close="onClose"
        title="事件指派"
        @onConfirm="onForwardConfirm">
        <el-form class="ai-form" label-width="120px" :model="forwardForm" ref="forwardForm">
          <el-form-item label="转交" prop="name" style="width: 100%;" :rules="[{ required: true, message: '请选择网格员或网格' }]">
            <el-input disabled size="small" v-model="forwardForm.name" clearable placeholder="请选择网格员或网格">
              <template slot="append">
                <el-button @click="isShowUser = true">选择</el-button>
              </template>
            </el-input>
          </el-form-item>
          <el-form-item label="办理意见" prop="content" style="width: 100%;" :rules="[{ required: true, message: '请输入办理意见' }]">
            <el-input type="textarea" :rows="5" :maxlength="500" v-model="forwardForm.content" clearable placeholder="请输入办理意见" show-word-limit></el-input>
          </el-form-item>
          <el-form-item label="图片" prop="files" style="width: 100%;">
            <ai-uploader
              :instance="instance"
              v-model="forwardForm.files"
              isShowTip
              :limit="9">
            </ai-uploader>
          </el-form-item>
        </el-form>
      </ai-dialog>
      <ai-dialog
        :visible.sync="isShowUser"
        width="800px"
        title="选择网格或网格员"
        @onConfirm="onConfirm">
        <div class="grid-wrapper">
          <el-input
            style="margin-bottom: 10px;"
            size="small"
            placeholder="请输入网格名称/网格员姓名/网格员电话"
            v-model="name"
            suffix-icon="iconfont iconSearch">
          </el-input>
          <el-tree
            :filter-node-method="filterNode"
            ref="tree"
            :props="defaultProps"
            node-key="id"
            :data="tree"
            highlight-current
            @current-change="onTreeChange">
            <div class="tree-container" slot-scope="{ data }">
              <div class="tree-container__user">
                <div class="tree-user__item">
                  <span>{{ data.isUser ? `${data.name}-${data.phone}` : data.girdName }}</span>
                </div>
              </div>
            </div>
          </el-tree>
        </div>
      </ai-dialog>
    </template>
  </ai-detail>
</template>

<script>
  import AMapLoader from '@amap/amap-jsapi-loader'
  import { mapState } from 'vuex'

  export default {
    name: 'Detail',
    props: ['dict', 'instance', 'params'],

    data() {
      return {
        forwardForm: {
          content: '',
          girdId: '',
          girdName: '',
          girdMemberId: '',
          girdMemberName: '',
          name: ''
        },
        isLoading: true,
        name: '',
        detail: {},
        isShowUser: false,
        eventList: [],
        isShowAdd: false,
        userList: [],
        processList: [],
        dictList: [],
        defaultProps: {
          children: 'girdList',
          label: 'girdName'
        },
        isShowForward: false,
        tree: [],
        gridInfo: {},
        form: {
          files: [],
          groupId: '',
          groupName: '',
          content: [],
          eventStatus: '2'
        }
      }
    },

    computed: {
      ...mapState(['user'])
    },

    watch: {
      name (val) {
        this.$refs.tree.filter(val)
      }
    },

    created() {
      this.getDict()
      this.getGirdList()
      this.dict.load('clapEventStatus').then(() => {
        this.getDetail()
      })
    },

    methods: {
      getDetail() {
        this.instance.post('/app/appclapeventinfo/queryDetailById', null, {
          params: { id: this.params.id }
        }).then(res => {
          if (res?.data) {
            this.detail = res.data
            this.processList = res.data.processList
            this.form.groupId = res.data.groupId

            this.$nextTick(() => {
              this.initMap()
            })
            this.isLoading = false
          }
        }).catch(() => {
          this.isLoading = false
        })
      },

      getGirdList () {
        this.instance.post(`/app/appgirdinfo/listAllByTop`).then(res => {
          if (res.code == 0) {
            this.tree = this.formatList(res.data)
          }
        })
      },

      onClose () {
        this.form.files = []
        this.form.groupId = ''
        this.form.groupName = ''
        this.form.content = ''
        this.form.eventStatus = ''
        this.forwardForm.content = ''
        this.forwardForm.girdId = ''
        this.forwardForm.girdName = ''
        this.forwardForm.girdMemberId = ''
        this.forwardForm.girdMemberName = ''
        this.forwardForm.name = ''
      },

      formatList (list) {
        var arr = []
        for (let item of list) {
          if (item.girdMemberList && item.girdMemberList.length) {
            let userList = JSON.parse(JSON.stringify(item.girdMemberList)).map(v => {
              return {
                  ...v,
                isUser: true,
                girdName: item.girdName,
                girdId: item.girdId
              }
            })

            item.girdList = [
              ...userList
            ]
            delete item.girdMemberList
          }

          if (item.girdList && item.girdList.length) {
            this.formatList(item.girdList)
          }

          arr.push(item)
        }

        return arr
      },

      filterNode (value, data) {
        if (!value) return true

        return (data.girdName && data.girdName.indexOf(value) !== -1) || (data.name && data.name.indexOf(value) !== -1) || (data.name && data.phone.indexOf(value) !== -1)
      },

      onTreeChange (e) {
        this.gridInfo = e
      },

      onForwardConfirm () {
        this.$refs.forwardForm.validate(v => {
          if (v) {
            this.instance.post('/app/appclapeventinfo/transferByManager', {
              ...this.forwardForm,
              id: this.params.id
            }).then(res => {
              if (res?.code == 0) {
                this.isShowForward = false
                this.getDetail()
                this.$message.success('转交成功!')
              }
            })
          }
        })
      },

      onConfirm () {
        if (this.gridInfo.userId || this.gridInfo.isLastLevel === '1') {
          if (this.gridInfo.userId) {
            this.forwardForm.girdId = this.gridInfo.girdId
            this.forwardForm.girdName = this.gridInfo.girdName
            this.forwardForm.girdMemberId = this.gridInfo.userId
            this.forwardForm.girdMemberName = this.gridInfo.name
          } else {
            this.forwardForm.girdId = this.gridInfo.id
          }

          this.forwardForm.girdName = this.gridInfo.girdName
          this.forwardForm.name = `${this.gridInfo.girdName}${this.gridInfo.name ? '-' + this.gridInfo.name : ''}`

          this.isShowUser = false
        } else {
          return this.$message.error('请选择网格员或者最后层网格')
        }
      },

      getDict () {
        this.instance.post(`/app/appclapeventgroup/list?current=1&size=100000`).then(res => {
          if (res.code == 0) {
            this.dictList = res.data.records.map(v => {
              return {
                dictValue: v.id,
                dictName: v.groupName
              }
            })
          }
        })
      },

      close () {
        this.$confirm('确定关闭该事件？').then(() => {
          this.instance.post(`/app/appmininotice/delete?ids=${this.params.id}`).then(res => {
            if (res.code == 0) {
              this.$message.success('删除成功！')
              this.getList()
            }
          })
        })
      },

      cancel (isRefresh) {
        this.$emit('change', {
          type: 'list',
          isRefresh: !!isRefresh
        })
      },

      onChange(e) {
        this.instance.post(`/app/appvillagerintegralrule/list?size=1000&classification=${e}&ruleStatus=1`).then(res => {
          if (res.code === 0) {
            this.form.ruleId = ''
            this.eventList = res.data.records
          }
        })
      },

      initMap() {
        let { lng, lat } = this.detail
        let center = [lng, lat]
        AMapLoader.load({
          key: '54a02a43d9828a8f9cd4f26fe281e74e',
          version: '2.0'
        }).then(AMap => {
          let map = new AMap.Map('map', {
            center,
            zoom: 14
          })
          let marker = new AMap.Marker({
            position: new AMap.LngLat(lng, lat),
            title: this.detail.address
          })
          map.add(marker)
        })
      },

      handleEvent() {
        this.$refs.form.validate(v => {
          if (v) {
            this.instance.post('/app/appclapeventinfo/finishByManager', {
              ...this.form,
              groupName: this.dictList.filter(v => v.dictValue === this.form.groupId)[0].dictName,
              id: this.params.id
            }).then(res => {
              if (res?.code == 0) {
                this.isShowAdd = false
                this.getDetail()
                this.$message.success('处理成功!')
              }
            })
          }
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .reportAtWillDetail {
    height: 100%;

    .grid-wrapper {
      min-height: 360px;
    }

    .title-btns {
      display: flex;
      align-items: center;
    }
      ::v-deep .el-tree {
        background: transparent;

        .el-tree-node__expand-icon.is-leaf {
          color: transparent !important;
        }

        .el-tree-node__content > .el-tree-node__expand-icon {
          padding: 4px;
        }

        .el-tree-node__content {
          height: 32px;
        }

        .el-tree__empty-text {
          color: #222;
          font-size: 14px;
        }

        .el-tree-node__children .el-tree-node__content {
          height: 32px;
        }

        .el-tree-node__content:hover {
          background: #E8EFFF;
          color: #222222;
          border-radius: 2px;
        }

        .is-current > .el-tree-node__content {
          &:hover {
            background: #2266FF;
            color: #fff;
          }

          background: #2266FF;

          span {
            color: #fff;
          }
        }
      }

    .el-steps {
      ::v-deep .el-step__icon {
        font-size: 12px;
        color: #555555;
        border-color: #d0d4dc;
      }

      ::v-deep .el-step__head.is-finish {
        .el-step__icon.is-text {
          border: none;
          color: #fff;
          font-size: 12px;
          background: #2266ff;
        }
      }

      ::v-deep .el-step__line {
        background-color: #d0d4dc;
      }
    }

    .imgs {
      font-size: 0;

      img {
        width: 108px;
        height: 108px;
        margin-right: 4px;
        margin-bottom: 4px;
        cursor: pointer;
        user-select: none;

        &:hover {
          opacity: 0.8;
        }

        &:nth-of-type(2n) {
          margin-right: 0;
        }
      }
    }

    ::v-deep .report-dialog {
      .el-select {
        width: 100%;
      }
    }

    ::v-deep .el-step__head.is-process {
      color: #555;
      border-color: #555;
    }

    ::v-deep .is-finish h2 {
      color: #2266ff;
    }

    .step-title {
      color: #555;
    }

    .detail-content__wrapper {
      display: flex;
      width: 100%;

      .detail-content__wrapper--left {
        flex: 1;
        margin-right: 20px;
      }
    }

    ::v-deep .ai-detail__content {
      background: #f3f6f9;

      .ai-detail__content--wrapper {
        display: flex;
        gap: 16px;
        width: 100%;
        max-width: 100%;
        padding: 16px;
        box-sizing: border-box;

        & > .el-card {
          flex: 1;
          min-width: 0;
        }

        .rightZone {
          width: 400px;
          flex-shrink: 0;
          display: flex;
          flex-direction: column;
          gap: 16px;
        }
      }
    }

    ::v-deep .el-card {
      .el-card__header {
        padding: 12px 16px;
        font-weight: bold;
      }

      .el-card__body {
        padding: 8px;
      }

      #amap {
        width: 466px;
        height: 232px;
      }

      .el-steps {
        margin-left: 8px;
      }

      .imgFormItem > .el-form-item__content {
        display: flex;
        gap: 16px;
        flex-wrap: wrap;

        &:before {
          content: none;
        }

        .el-image__inner {
          width: 82px;
          height: 82px;
        }
      }
    }
  }
</style>
