<template>
  <div>

    <el-dialog
        :before-close="handleClose"
        :modal="true"
        :modal-append-to-body="false"
        :visible.sync="dialogVisible"
        class="dissatisfied-detail"
        title=""
        width="1118px"
    >
      <div class="content">
        <div class="main-title main-title2">
          <Title text="事件派单"/>
        </div>
        <div v-if="dialogVisible" class="contents">
          <el-row>
            <el-col :span="12">
              <div class="items">
                <div class="label">事件类型：</div>
                <div class="value">{{ detail.categoryName }}</div>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="items">
                <div class="label">接收时间：</div>
                <div class="value">{{ detail.happenTime }}</div>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="items">
                <div class="label">发生地点：</div>
                <div class="value">{{ detail.address }}</div>
              </div>
            </el-col>
            <el-col :span="24">
              <div class="items">
                <div class="label">事件描述：</div>
                <div class="value">
                  {{ detail.eventContent }}
                </div>
              </div>
            </el-col>
            <el-col :span="24">
              <div class="items" style="align-items: center">
                <div class="label required">处理方式：</div>
                <el-radio-group
                    v-model.trim="form.operationType"
                    class="select"
                    popper-class="selectPopClass"
                    text-color="#fff">
                  <el-radio label="5" value="5">指派</el-radio>
                  <el-radio label="2" value="2">转服务</el-radio>
                </el-radio-group>
              </div>
            </el-col>
          </el-row>
          <template v-if="form.operationType == '5'">
            <Assign  :eventDetailData="detail" @change="setForm"/>
          </template>
          <template v-if="form.operationType == '2'">
            <TransferService
                :transferObj="transferObj"
                @change="setForm"
                :demandUserId="detail.demandUserId"
                :demandUserName="detail.demandUserName"
                :demandUserMobile="detail.demandUserMobile"
                :eventId="detail.icEventId"
                :eventDetailData="detail"
            />
          </template>
          <div class="btn-group">
            <el-button class="cancel" plain round type="success" @click="handleCancel">取消</el-button>
            <el-button class="sure" plain round type="warning" @click="handleSure">确定</el-button>
          </div>

        </div>
      </div>
    </el-dialog>
    <el-dialog :visible.sync="imageVisible" append-to-body width="300px">
      <img :src="dialogImageUrl" alt="" width="100%">
    </el-dialog>
  </div>
</template>

<script>
import Title from "@/views/dataBoard/satisfactionEval/components/Title";
import CallPhone from "@/views/dataBoard/cpts/CallPhone";
import Assign from "@/views/dataBoard/overview/components/EventDispatchOrder/Assign.vue";
import TransferService from "@/views/dataBoard/overview/components/EventDispatchOrder/TransferService.vue";

export default {
  name: "EventDispatchOrder",
  components: {Assign, Title, CallPhone, TransferService},
  data() {
    return {
      dialogVisible: false,
      form: {
        operationType: "5", //处理方式[0:已回复 5、指派  6、完成并回复]
      },
      dialogImageUrl: '',
      imageVisible: false,
      disabled: false,
      detail: {},
      transferObj: {}
    };
  },
  async mounted() {

  },
  methods: {
    setForm(val) {
      this.form = {
        ...this.form,
        ...val
      }
    },
    handleClose(done) {
      this.dialogVisible = false;
      this.$emit('close')
    },
    open(detail) {
      this.dialogVisible = true;
      this.detail = detail
      const {user} = this.$store.state;
      this.agencyId = user.agencyId;
      this.$EventBus.$on('map', (val) => {
        this.transferObj.latitude = val.lat
        this.transferObj.longitude = val.lng
      })
    },
    handleCancel() {
      this.handleClose()
    },
    handleSure() {
      if (!this.form.operationType) {

        this.$message.error('请选择处理方式')
        return;
      }
      let url = "/governance/icEventOld/reply"

      if (this.form.operationType == "5") {
        if (!this.form.categoryId) {
          this.$message.error('请选择事件分类')
          return;
        }
        if (!this.form.deptId) {
          this.$message.error('请选择处理部门')
          return;
        }
        if (!this.form.content) {
          this.$message.error('请选择转办意见')
          return;
        }
        if (!this.form.timeLimit) {
          this.$message.error('请选择办结时限')
          return;
        }
        this.form.files = this.fileList
        this.form.status = "processing"
      }
      if (this.form.operationType == "2") {
        url = "/governance/icEventOld/icEventToDemand";
        if (!this.form.content) {
          this.$message.error('服务内容不能为空')
          return;
        }
        if (!this.form.categoryCode) {
          this.$message.error("服务类型不能为空")
          return;
        }
        if (!this.form.wantServiceTime) {
          this.$message.error("服务时间不能为空")
          return;
        }
        if (!this.form.demandUserName) {
          this.$message.error("需求人不能为空")
          return;
        }
        if (!this.form.demandUserMobile) {
          this.$message.error("联系电话不能为空")
          return;
        }
        if (!this.form.serviceLocation) {
          this.$message.error("服务地点不能为空")
          return;
        }
        if (!this.form.serverId) {
          this.$message.error("服务组织不能为空")
          return;
        }
      }
      this.$http.post(url, {
        ...this.form,
        icEventId: this.detail.icEventId,
      }).then(res => {
        this.handleClose()
        this.$message.success('操作成功')
        this.$emit('ok')
      })
    },

  },
};
</script>

<style lang="scss" scoped>
@import "~@/assets/scss/dataBoard/dialog.scss";

.contents {
  padding: 40px 50px;

  .items {
    font-size: 14px;
    line-height: 34px;
    position: relative;
    display: flex;
    align-items: flex-start;
    margin-bottom: 17px;

    .label {
      white-space: nowrap;
      color: #9CB4D3;
    }

    .value {
      color: #FFFFFF;
    }
  }
}

.hr {
  height: 1px;
  margin: 25px 0;
  opacity: .4;
  border-bottom: 1px #0E79D6 dashed;
}


.btn-group {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 20px;

  .green {
    color: #00CD96;
    border: 1px solid #00CD96;
    background: rgba(39, 189, 127, 0.3);
  }

  .el-button {
    width: 136px;
    height: 36px;
    margin: 0 20px;
  }

  .orange {
    color: #FD8904;
    border: 1px solid #FD8904;
    background: rgba(253, 137, 4, 0.3);
  }

  .sure {
    color: #8ED3FF;
    border: 1px solid #006CFF;
    background: rgba(0, 108, 255, 0.5);
  }

  .cancel {
    color: #B6D2FF;
    border: 1px solid #6496E8;
    background: rgba(116, 146, 194, 0.6);
  }

}

.select {
  margin-right: 16px;
}

/deep/ .el-date-editor .el-range-separator {
  color: #fff;
}

/deep/ .el-radio {
  color: #fff;
}

/deep/ .el-input--medium .el-input__icon {
  line-height: 40px !important;
}

/deep/ .el-date-editor.el-input {
  width: 360px !important;
}

/deep/ .el-input .el-input__inner {
  width: 360px !important;
  height: 40px !important;
  color: #fff !important;
  border: 1px solid #0E3978 !important;
  border-radius: 20px !important;
  background: rgba(0, 23, 66, 0.72) !important;
}

/deep/ .el-range-editor .el-range-input {
  color: #fff;
  background: none;
}

::v-deep .date-current-weiyi {
  border-color: #006cff;
  background: rgba(3, 19, 51, 0.9);
  box-shadow: inset 0px 0px 16px 0px rgba(0, 145, 255, 1);

  .el-date-picker__header-label {
    color: #ffffff;
  }

  .el-picker-panel__icon-btn {
    color: #ffffff;
  }

  .el-month-table {
    td {
      .cell {
        color: #ffffff;
      }
    }
  }

  .el-month-table td.current:not(.disabled) .cell {
    color: #fff;
    background-color: #409eff;
  }

  .el-month-table td.today:not(.disabled) .cell {
    color: #0056d6;
  }

  .el-date-picker__header--bordered {
    border-bottom: solid 1px #006cff;
  }
}

/deep/ .el-textarea__inner {
  color: #fff;
  border: 1px solid #0E3978;
  border-radius: 2px;
  background: rgba(0, 23, 66, 0.72);
}

/deep/ .el-upload--picture-card {
  line-height: normal;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  opacity: 0.72;
  color: #fff;
  border: 1px solid #0E3978;
  border-radius: 2px;
  background: rgb(0, 23, 66);

  .text {
    margin-top: 10px;
  }
}

.required:before {
  margin-right: 5px;
  content: '*';
  color: #f00;
}
</style>
