<template>
  <el-dialog :title="dialogTitle" :close-on-click-modal="false" :visible.sync="dialogVisible" width="800px">
    <el-dialog title="选择客户" :append-to-body="true" :visible.sync="createInnerVisible">
      <clientInfo :is-choose="true" @chooseClient='chooseClient'></clientInfo>
    </el-dialog>
    <el-form label-width="80px" :rules="rules" :model="form" label-position="right">
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="投诉标题" prop="tsTitle">
            <el-select v-model="form.tsTitle">
              <el-option
                v-for="item in complaintTitleList"
                :key="item.id"
                :value="item.dictLabel"
                :label="item.dictLabel"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="投诉类型" prop="tsType">
            <el-select v-model="form.tsType">
              <el-option
                :value="'1'"
                label="内部投诉"></el-option>
              <el-option
                :value="'2'"
                label="客户投诉"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item>
            <el-checkbox :disabled="relationDisabled" v-model="relationChecked" @change="relationChange">是否关联订单</el-checkbox>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="完成时间" prop="finishHours">
            <el-input maxlength="3" v-model="form.finishHours" oninput = "value=Number(value.replace(/[^\d.]/g,''))" style="width:70px"></el-input>
            小时
          </el-form-item>
        </el-col>
        <el-col :span="12" v-if="relationChecked">
          <el-form-item label="订单编号">
            <el-input v-model="form.orderCode" :disabled="relationChecked"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12" v-if="relationChecked">
          <el-form-item label="订单名称">
            <el-input v-model="form.orderName" :disabled="relationChecked"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="客户名称">
            <!--              <el-input v-model="form.clientName"></el-input>-->
            <el-input
              style="width: 300px"
              v-model="form.clientName"
              disabled
              class="input-with-select"
              @click.native="relationChecked? '' : createInnerVisible = true"
            >
              <el-button
                slot="append"
                @click="relationChecked? '' : createInnerVisible = true ">选择
              </el-button>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="联系电话">
            <el-input v-model="form.linkPhone"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="事件描述">
            <el-input v-model="form.tsEven" type="textarea"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="投诉依据">
            <el-input v-model="form.complainReason" type="textarea"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="投诉目的">
            <el-input v-model="form.tsGoal" type="textarea"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="上传附件">
            <el-upload
              class="upload-demo"
              action="apis/upload/complaintAttachment"
              multiple
              accept=".doc,.docx,.mp3,.mp4,.xls,.xlsx,.rar,.zip,.7z,.jpg,.png,.bmp,.jpeg,.GIF,.PDF"
              :before-upload="beforeUpload"
              :on-change="handleChange"
              :on-remove= 'removeFile'
              :on-success= 'successFile'
              :file-list="fileList"
              name="originName">
              <el-button size="small" type="primary">点击上传</el-button>
              <!--                <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>-->
            </el-upload>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="tempBtn()">暂 存</el-button>
      <el-button type="green" :disabled="disabledFlag" @click="dialogStatus==='1'?addBtn():editBtn()">提 交</el-button>
    </div>
    <el-dialog
      width="80%"
      title="选择订单"
      :visible.sync="innerVisible"
      append-to-body>
      <el-input v-model="orderList.search.orderName" placeholder="印品名称" style="width: 200px;" class="filter-item"/>
      <el-input v-model="orderList.search.orderCode" placeholder="订单编号" style="width: 200px;" class="filter-item"/>
      <el-input v-model="orderList.search.clientName" placeholder="客户名称" style="width: 200px;" class="filter-item"/>
      <el-date-picker
        v-model="searchTime"
        type="daterange"
        range-separator="-"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        format="yyyy-MM-dd"
        value-format="yyyy-MM-dd"
        :default-time="['00:00:00', '23:59:59']">
      </el-date-picker>
      <el-button class="filter-item" type="primary" icon="el-icon-search" @click="searchOrder">
        搜索
      </el-button>
      <el-table
        :data="orderList.orderData"
        v-loading="orderList.listLoading"
        style="width: 100%;margin: 20px 0;"
        row-key="id"
        border
        highlight-current-row>
        <el-table-column
          label="操作"
          width="80">
          <template slot-scope="{row}">
            <el-button @click="chooseOrder(row)" type="primary" size="mini">
              选择
            </el-button>
          </template>
        </el-table-column>
        <el-table-column
          prop="orderName"
          label="订单名称">
        </el-table-column>
        <el-table-column
          label="订单编号"
          prop="orderCode"
        ></el-table-column>
        <el-table-column
          label="客户名称"
          prop="clientName"
        ></el-table-column>
        <el-table-column
          label="联系电话"
          prop="linkPhone"
        ></el-table-column>
        <el-table-column
          label="创建时间">
          <template slot-scope="{row}">
            <span>{{row.createTime | getTime}}</span>
          </template>
        </el-table-column>
      </el-table>
      <pagination
        v-show="orderList.listData.total>0"
        :total="orderList.listData.total"
        :page.sync="orderList.listData.page"
        :limit.sync="orderList.listData.pageSize"
        @pagination="getOrderInfo"/>
    </el-dialog>
  </el-dialog>
</template>

<script>
import {
  addComplaintBill,
  getComplaintBill,
  getDictTypeInfo, getPrintOrderList,
  temporaryComplaintBill, updateComplaintBill
} from "@/api/complaint/complaintRegister";
import clientInfo from '@/views/doc/client/clientList'

const form = {
  tsTitle: '',
  tsType: '',
  idOrder: '',
  orderCode: '',
  clientName: '',
  linkPhone: '',
  finishHours: '',
  tsEven: '',
  tsGoal: '',
  complainReason: '',
  attachmentList: [],
  idClient: '',
}
export default {
  name: "complaintRegistration",
  components: {clientInfo},
  data(){
    return{
      dialogTitle: '',
      dialogVisible: false,
      innerVisible: false,
      createInnerVisible: false,
      complaintTitleList: [],
      form: Object.assign({}, form),
      relationChecked: false,
      relationDisabled: false,
      disabledFlag: false,
      fileList:[],
      orderList: {
        listData: {
          total: 0,
          page: 1,
          pageSize: 10
        },
        search: {
          orderName: '',
          orderCode: '',
          clientName: '',
          beginTime: '',
          endTime: ''
        },
        orderData: [],
        listLoading: false
      },
      searchTime: [],

      // 验证规则
      rules: {
        finishHours: [{ required: true, trigger: 'blur', message: '请填写完成时间' }],
        tsTitle: { required: true, trigger: 'blur', message: '请选择投诉标题' },
        tsType: { required: true, trigger: 'blur', message: '请选择投诉类型' }
      }
    }
  },
  mounted() {
    this.getComplaintTitle()
  },
  methods:{
    // 增加投诉登记
    handleCreateAdd() {
      const _that = this
      _that.form = Object.assign({}, form)
      _that.fileList = []
      _that.dialogTitle = '增加投诉登记'
      _that.dialogStatus = '1'
      _that.dialogVisible = true
      _that.relationChecked = false
      _that.relationDisabled = false
    },

    // 获取投诉标题
    getComplaintTitle() {
      const _that = this
      var data = {
        'dictTypeText': 'complaintTitle'
      }

      getDictTypeInfo(data).then(response => {
        // console.log(response)
        _that.complaintTitleList = response.data
      }).catch(err => {
        _that.$message.error(err)
      })
    },
    // 选择客户
    chooseClient(data) {
      this.createInnerVisible = false
      this.form.clientName = data.clientName
      this.form.idClient = data.id
    },
    // 是否关联订单变化
    relationChange(val) {
      // console.log(val)
      if (val) {
        this.innerVisible = true
        this.orderList.search = {
          orderName: '',
          orderCode: '',
          clientName: '',
          beginTime: '',
          endTime: ''
        }
        this.searchTime = []
        this.getOrderInfo()
      } else {
        this.innerVisible = false
      }
    },
    // 获取订单
    getOrderInfo() {
      const _that = this
      _that.orderList.listLoading = true
      if (_that.searchTime == null || _that.searchTime < 0) {
        _that.orderList.search.beginTime = ''
        _that.orderList.search.endTime = ''
      } else {
        _that.orderList.search.beginTime = _that.searchTime[0]
        _that.orderList.search.endTime = _that.searchTime[1]
      }
      var params = _that.orderList.search
      var page = {
        pageIndex: _that.orderList.listData.page,
        pageSize: _that.orderList.listData.pageSize
      }
      var data = {
        'params': JSON.stringify(params),
        'page': JSON.stringify(page)
      }

      getPrintOrderList(data).then(response => {
        console.log(response)
        _that.orderList.orderData = response.data
        _that.orderList.listData.total = response.total
        _that.orderList.listLoading = false
      }).catch(err => {
        _that.$message.error(err)
      })
    },

    searchOrder() {
      this.orderList.listData.page = 1
      this.getOrderInfo()
    },
    // 选择订单
    chooseOrder(row) {
      const _that = this
      _that.innerVisible = false
      _that.form.clientName = row.clientName
      _that.form.linkPhone = row.linkPhone
      _that.form.orderCode = row.orderCode
      _that.form.orderName = row.orderName
      _that.form.idOrder = row.id
    },

    beforeUpload(file) {
      // console.log(file)
      var testmsg = file.name.substring(file.name.lastIndexOf('.')+1)
      const extension = testmsg === 'doc'
      const extension2 = testmsg === 'docx'
      const extension3 = testmsg === 'mp3'
      const extension4 = testmsg === 'mp4'
      const extension5 = testmsg === 'xls'
      const extension6 = testmsg === 'xlsx'
      const extension7 = testmsg === 'rar'
      const extension8 = testmsg === 'zip'
      const extension9 = testmsg === '7z'
      const extension10 = testmsg === 'jpg'
      const extension11 = testmsg === 'png'
      const extension12 = testmsg === 'bmp'
      const extension13 = testmsg === 'jpeg'
      const extension14 = testmsg === 'pdf'
      const isLt2M = file.size / 1024 / 1024 < 2;                         //限制图片大小
      if(!extension && !extension2 && !extension3 && !extension4 && !extension5 && !extension6 && !extension7 && !extension8 && !extension9 && !extension10 && !extension11 && !extension12 && !extension13 && !extension14 ) {
        this.$message({
          message: '上传文件只能是 doc、docx、mp3、mp4、xls、xlsx、rar、zip、7z、jpg、png、bmp、jpeg、pdf格式!',
          type: 'warning'
        });
      }
      if (!isLt2M) {
        this.$message.warning('上传图片大小不能超过 2MB!');
      }
      const isPG = (extension || extension2 || extension3 || extension4 || extension5 || extension6 || extension7 || extension8 || extension9 || extension10 || extension11 || extension12 || extension13 || extension14)
      return isLt2M && isPG
    },
    // 上传
    handleChange(file, fileList) {
      console.log(fileList);
      // this.fileList = fileList.slice(-3);
    },
    removeFile(file, fileList) {
      // console.log(file);
      console.log(fileList);
      var attachmentList = []
      fileList.forEach(item => {
        if (item.response == undefined) {
          attachmentList.push(item)
        } else {
          attachmentList.push(item.response.data.attachmentList[0])
        }
      })
      this.form.attachmentList  = attachmentList
    },
    successFile(res, file, fileList) {
      // console.log('success返回');
      // console.log(this.form.attachmentList);
      // console.log('res',res);
      // console.log('file',file);
      // console.log('fileList',fileList);
      // var attachmentList = []
      // fileList.forEach(item => {
      //   attachmentList.push(item.response.data.attachmentList[0])
      // })
      console.log(file.response.data.attachmentList[0]);
      this.form.attachmentList = this.form.attachmentList.concat(file.response.data.attachmentList[0])

    },


    // 增加投诉登记
    addBtn() {
      const _that = this
      if (!_that.form.tsTitle) {
        _that.$message.warning('请选择投诉标题')
        return
      }
      if (!_that.form.tsType) {
        _that.$message.warning('请选择投诉类型')
        return
      }
      if (!_that.form.finishHours) {
        _that.$message.warning('请填写完成时间')
        return
      }
      if (_that.form.finishHours>1000) {
        _that.$message.warning('超出最大时间限制');
        _that.form.finishHours = "";
        return
      }
      if (_that.form.finishHours<=0) {
        _that.$message.warning('完成时间不能为0');
        _that.form.finishHours = "";
        return
      }
      _that.disabledFlag = true
      var printerTypeInfo = JSON.stringify(_that.form)
      var data = {
        'complaintBill': printerTypeInfo
      }
      // console.log(data);
      // return

      addComplaintBill(data).then(res => {
        console.log('addComplaintBill', res)
        if (res.httpCode == 200) {
          _that.dialogVisible = false
          _that.disabledFlag = false
          _that.$message({
            message: '增加成功',
            type: 'success'
          })
          if (!_that.relationDisabled) {
            _that.$emit('tableRefresh','')
          }
          // _that.tableRefresh()
        } else {
          _that.$message.error(res.msg)
        }
      }).catch(err => {
        _that.disabledFlag = false
        _that.$message.error(err)
        _that.dialogVisible = true
      })
    },

    // 唤起修改
    handleUpdate(row) {
      const _that = this
      _that.form = Object.assign({}, form)
      _that.fileList = []
      _that.dialogTitle = '修改投诉登记信息'
      _that.dialogVisible = true
      _that.dialogStatus = '2'

      var id = row.id
      var data = {
        id: id
      }

      getComplaintBill(data).then(res => {
        console.log('getPrinterTypeInfo', res)
        const data = res.data
        data.attachmentList.forEach(item => {
          item['name'] = item.originName
        })
        _that.fileList = data.attachmentList
        _that.form = {
          id: data.id,
          tsTitle: data.tsTitle,
          tsType: data.tsType,
          idOrder: data.idOrder,
          orderCode: data.orderCode,
          orderName: data.orderName,
          clientName: data.clientName,
          linkPhone: data.linkPhone,
          finishHours: data.finishHours,
          tsEven: data.tsEven,
          tsGoal: data.tsGoal,
          complainReason: data.complainReason,
          attachmentList: data.attachmentList
        }
        if (data.orderFlag == 1) {
          _that.relationChecked = true
        } else {
          _that.relationChecked = false
        }
      }).catch(err => {
        _that.$message.error(err)
      })
    },
    // 修改投诉登记
    editBtn() {
      const _that = this
      var printerTypeInfo = JSON.stringify(_that.form)
      if (!_that.form.finishHours) {
        _that.$message.warning('请填写完成时间')
        return
      }
      if (_that.form.finishHours>1000) {
        _that.$message.warning('超出最大时间限制');
        _that.form.finishHours = "";
        return
      }
      if (_that.form.finishHours<=0) {
        _that.$message.warning('完成时间不能为0');
        _that.form.finishHours = "";
        return
      }
      _that.disabledFlag = true
      var data = {
        'complaintBill': printerTypeInfo
      }

      updateComplaintBill(data).then(res => {
        // console.log(res);
        if (res.httpCode == 200) {
          _that.dialogVisible = false
          _that.disabledFlag = false
          _that.$message({
            message: '修改成功',
            type: 'success'
          })
          _that.$emit('tableRefresh','')
          // _that.tableRefresh()
        } else {
          _that.$message.error(res.msg)
        }
      }).catch(err => {
        _that.disabledFlag = false
        _that.$message.error(err)
        _that.dialogVisible = true
      })
    },
    // 暂存投诉单
    tempBtn() {
      const _that = this
      if (!_that.form.finishHours) {
        _that.$message.warning('请填写完成时间')
        return
      }
      if (_that.form.finishHours>1000) {
        _that.$message.warning('超出最大时间限制');
        _that.form.finishHours = "";
        return
      }
      if (_that.form.finishHours<=0) {
        _that.$message.warning('完成时间不能为0');
        _that.form.finishHours = "";
        return
      }
      var printerTypeInfo = JSON.stringify(_that.form)
      var data = {
        'complaintBill': printerTypeInfo
      }

      temporaryComplaintBill(data).then(res => {
        // console.log(res);
        if (res.httpCode == 200) {
          _that.dialogVisible = false
          _that.$message({
            message: '暂存成功',
            type: 'success'
          })
          if (!_that.relationDisabled) {
            _that.$emit('tableRefresh','')
          }
          // _that.tableRefresh()
        } else {
          _that.$message.error(res.msg)
        }
      }).catch(err => {
        _that.$message.error(err)
        _that.dialogVisible = true
      })
    },

  }
}
</script>

<style scoped>

</style>
