<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 class="contents" v-if="dialogVisible">
          <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="12">
              <div class="items" style="align-items: center">
                <div class="label">处理方式：</div>
                <el-radio-group v-model="form.operationType" class="select" popper-class="selectPopClass"
                                text-color="#fff">
                  <el-radio label="5" value="5">指派</el-radio>
<!--                  <el-radio disabled label="" value="">转财务</el-radio>-->
                </el-radio-group>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="items" style="align-items: center">
                <div class="label">事件分类：</div>
                <el-cascader
                    :key="iscascaderShow"
                    ref="myCascader"
                    v-model="selCategoryArray"
                    :options="casOptions"
                    :props="optionProps"
                    :show-all-levels="false"
                    class="select"
                    clearable
                    popper-class="selectPopClass"
                    @change="handleChangeCate"
                />
              </div>
            </el-col>
            <el-col :span="12">
              <div class="items">
                <div class="label">处理部门：</div>
                <el-cascader
                    ref="agencyIdArray"
                    v-model="agencyIdArray"
                    :options="orgOptions"
                    :props="orgOptionProps"
                    :show-all-levels="false"
                    class="select"
                    popper-class="selectPopClass"
                    @change="handleChangeAgency"
                />
                <!--                <div class="value">{{ detail.gridName }} {{ detail.name }}</div>-->
              </div>
            </el-col>
            <el-col :span="24">

              <div class="items">
                <div class="label">转办意见：</div>
              </div>
            </el-col>
            <el-col :span="24">
              <div class="items">
                <el-input
                    v-model="form.content"
                    :autosize="{ minRows: 5, maxRows: 10}"
                    class="input"
                    maxlength="500"
                    placeholder="请输入转办意见"
                    type="textarea"/>
              </div>
            </el-col>

            <el-col :span="24">
              <div class="items">
                <div class="label">图片/附件：</div>
              </div>
            </el-col>
            <el-col :span="24">
              <div class="items">
                <!--                <el-upload
                                    :auto-upload="false"
                                    action="#"
                                    list-type="picture-card">
                                  <div slot="default">
                                    <i class="el-icon-plus"></i>
                                    <div class="text">添加图片</div>
                                  </div>

                                  <div slot="file" slot-scope="{file}">
                                    <img
                                        :src="file.url"
                                        alt="" class="el-upload-list__item-thumbnail"
                                    >
                                    <span class="el-upload-list__item-actions">
                                      <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
                                        <i class="el-icon-zoom-in"></i>
                                      </span>
                                      <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleDownload(file)">
                                        <i class="el-icon-download"></i>
                                      </span>
                                      <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemove(file)">
                                        <i class="el-icon-delete"></i>
                                      </span>
                                    </span>
                                  </div>
                                </el-upload>-->
                <el-upload
                    :action="uploadUlr"
                    :before-upload="beforeUpload"
                    :file-list="fileList"
                    :headers="$getElUploadHeaders()"
                    :limit="3"
                    :on-preview="handleFileDownload"
                    :on-remove="handleFileRemove"
                    :on-success="handleFileSuccess"
                    accept=".doc,.pdf,.xls,.docx,.xlsx,.jpg,.png,.jpeg,.bmp,.mp4,.wma,.m4a,.mp3"
                    class="upload-demo">
                  <el-button :disabled="fileList.length === 3" size="small" type="primary">点击上传</el-button>
                  <div slot="tip" class="el-upload__tip">支持图片、word、pdf</div>
                </el-upload>
              </div>
            </el-col>
            <el-col :span="24">
              <div class="items">
                <div class="label">办结时限：</div>
                <el-date-picker
                    v-model="form.timeLimit"
                    :append-to-body="false"
                    format="yyyy-MM-dd"
                    placeholder="开始日期"
                    popper-class="date-current-weiyi"
                    value-format="yyyy-MM-dd HH:mm:ss"
                />
              </div>
            </el-col>
          </el-row>


          <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 {requestPost} from "@/js/dai/request";

export default {
  name: "EventDispatchOrder",
  components: {Title, CallPhone},
  data() {
    return {
      dialogVisible: false,
      form: {
        operationType: "5", //处理方式[0:已回复 5、指派  6、完成并回复]
        content: "",//转办意见
        timeLimit: "",//办结时限
        categoryId: "",//事件分类
        deptId: "", //指派部门
        deptName: "",
        categoryList: [],
        files: [] //附件
      },
      dialogImageUrl: '',
      imageVisible: false,
      disabled: false,
      detail: {},


      orgOptions: [],
      orgOptionProps: {
        multiple: false,
        value: 'agencyId',
        label: 'agencyName',
        children: 'subAgencyList',
        checkStrictly: true
      },
      agencyIdArray: [],
      status: false,
      okflag: false,
      eventDetailCopy: {},
      selCategoryArray: [],
      casOptions: [],
      fileList: [],
      uploadUlr: window.SITE_CONFIG["apiURL"] + "/oss/file/uploadvariedfile",
      iscascaderShow: 0,
      optionProps: {
        multiple: false,
        value: "id",
        label: "categoryName",
        children: "children",
        checkStrictly: true
      },
      dataRule: {
        content: [
          {required: true, message: "回复内容不能为空", trigger: "blur"},
        ],
        categoryId: [
          {required: true, message: "事件分类不能为空", trigger: "blur"},
        ],
        deptId: [
          {required: true, message: "处理部门不能为空", trigger: "blur"},
        ],
        timeLimit: [
          {required: true, message: "办结时限不能为空", trigger: "blur"},
        ],
        categoryList: [
          {required: true, message: '事件分类不能为空', trigger: 'blur'},
        ]
      },
      selCateObj: {
        id: ""
      },

    };
  },
  async mounted() {

  },
  methods: {

    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.getOrgTreeList();
      this.getCategoryList();
    },
    handleCancel() {
      this.handleClose()
    },
    handleSure() {
      console.log(this.form)
      this.$http.post('/governance/icEventOld/reply', {
        ...this.form,
        files: this.fileList,
        icEventId: this.detail.icEventId,
        status:"processing",
      }).then(res => {
        this.handleClose()
        this.$message.success('操作成功')
        this.$emit('ok')
      })
    },

    beforeUpload(file) {
      const array = file.name.split(".");
      const extension = array[array.length - 1];
      const formatarray = [
        "jpg",
        "png",
        "jpeg",
        "bmp",
        "mp4",
        "wma",
        "m4a",
        "mp3",
        "doc",
        "docx",
        "xls",
        "xlsx",
        "pdf",
      ];
      if (formatarray.indexOf(extension) === -1) {
        this.$message.error("只支持图片、word、pdf");
        return false;
      }
    },
    handleFileRemove(file) {
      if (file && file.status === "success") {
        this.fileList.splice(
            this.fileList.findIndex((item) => item.uid === file.uid),
            1
        );
      }
    },
    handleFileSuccess(res, file) {
      if (res.code === 0 && res.msg === "success") {
        const array = file.name.split(".");
        const fileType = array[array.length - 1];
        const picArray = ["jpg", "png", "jpeg", "bmp"];
        const videoarray = ["mp4", "wma", "m4a"];
        const docArray = ["doc", "docx", "xls", "xlsx", "pdf"];
        const mp3Array = ["mp3"];

        if (picArray.indexOf(fileType) > -1) {
          file.attachmentFormat = "image";
        } else if (videoarray.indexOf(fileType) > -1) {
          file.attachmentFormat = "video";
        } else if (docArray.indexOf(fileType) > -1) {
          file.attachmentFormat = "doc";
        } else if (mp3Array.indexOf(fileType) > -1) {
          file.attachmentFormat = "voice";
        }

        file.url = res.data.url;
        file.type = fileType;

        file.attachmentName = file.name;
        file.attachmentType = file.type;
        file.attachmentUrl = file.url;

        this.fileList.push(file);
      } else this.$message.error(res.msg);
    },
    //下载
    handleFileDownload(file) {
      var a = document.createElement("a");
      var event = new MouseEvent("click");
      a.download = file.name;
      a.target = '_blank';
      a.href = file.url;
      a.dispatchEvent(event);
    },
    handleChangeCate() {
      if (this.selCateObj = this.$refs["myCascader"].getCheckedNodes()[0]) {
        this.selCateObj = this.$refs["myCascader"].getCheckedNodes()[0].data
        this.form.categoryList = this.selCateObj
        this.form.categoryId = this.selCateObj.id
      } else {
        this.selCateObj = {}
      }
    },
    handleChangeAgency(val) {
      let obj = this.$refs["agencyIdArray"].getCheckedNodes()[0].data
      if (obj) {
        this.form.orgType = obj.level === 'grid' ? 'grid' : 'agency'
        this.form.deptId = obj.agencyId
        this.form.deptName = obj.agencyName
      } else {
        this.form.orgType = ''
        this.form.orgId = ''
      }
    },
    //组织机构树
    async getOrgTreeList() {
      const url = "/gov/org/customeragency/agencygridtree"
      let params = {
        agencyId: this.agencyId,
        purpose: "query"
      }
      const {data, code, msg} = await requestPost(url, params)
      if (code === 0) {
        this.orgOptions = []
        this.orgOptions.push(data)
      } else {
        this.$message.error(msg)
      }
    },
    async getCategoryList() {
      const url = '/governance/icEvent/getCategoryTree';
      let params = {};
      const {data, code, msg} = await requestPost(url, params);
      if (code === 0) {
        let treeDataNew = this.deepTree(data, "children");
        ++this.iscascaderShow;
        this.casOptions = [];
        this.casOptions = treeDataNew;
      } else {
        this.$message.error(msg);
      }
      if (this.eventDetailCopy.parentCategoryId) {
        const pids = this.eventDetailCopy.parentCategoryId.split(',');
        pids.push(this.eventDetailCopy.categoryId);
        let nodes = this.casOptions;
        for (let i = 0; i < pids.length; i++) {
          nodes = this.buildNode(nodes, pids[i])
        }
        if (nodes) {
          this.form.categoryList.push(nodes)
          this.selCateObj = nodes
        }
      }
    },

    //重构树，去除网格
    deepTree(arr, children) {
      if (Array.isArray(arr) && arr.length > 0) {
        return arr.map((item) => {
          return {
            ...item,
            [children]:
            (item[children] &&
                item[children].length > 0 &&
                this.deepTree(item[children], children)) ||
            null,
          };
        });
      }
    },
  },
};
</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__inner {
  width: 360px;
  height: 40px;
  color: #fff;
  border: 1px solid #0E3978;
  border-radius: 20px;
  background: rgba(0, 23, 66, 0.72);
}

/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;
  }
}
</style>
