<template>
  <div class="workOrderManagement">
    <!-- 搜索框 -->
    <el-card>
      <el-row :span="24">
        <!-- <el-col :span="16" class="search">
          <el-input placeholder="请输入内容" class="input-with-select" v-model="searchValue" filterable @input="search">
            <el-select slot="prepend" v-model="select" @change="selectSearch" class="searchSelect" placeholder="请选择">
              <el-option label="工单状态" value="issue_status" />
              <el-option label="金额" value="amount" />
              <el-option label="标题" value="title" />
            </el-select>
            <el-button slot="append" class="searchSelectIcon" icon="el-icon-search" @click="search" />
          </el-input>
        </el-col> -->
        <el-col :span="8">
          <el-button size="small" type="primary" @click="addIssue">新增工单</el-button>
        </el-col>
      </el-row>
    </el-card>

    <!-- 表格 -->

    <el-card class="workOrderList">
      <el-tabs v-model="activeName" class="table">
        <el-tab-pane label="待处理" name="first">
          <el-table :data="tableData" style="width: 100%;" height="calc(100vh - 257px)" border>
            <el-table-column align="center" prop="title" label="标题" min-width="180"></el-table-column>
            <el-table-column align="center" prop="description" label="描述" min-width="280"></el-table-column>
            <el-table-column align="center" prop="create_date" label="创建时间" min-width="120"></el-table-column>
            <el-table-column align="center" prop="" label="结束时间" min-width="120">
              <template slot-scope="scope">
                {{ scope.row.finish_date == null ? '未结束' : scope.row.finish_date }}
              </template>
            </el-table-column>
            <el-table-column align="center" label="工单状态" min-width="150">
              <template slot-scope="scope">
                {{ getResult(scope.row.issue_status) }}
              </template>
            </el-table-column>
            <el-table-column align="center" label="操作" class="btnStyleView" min-width="280">
              <template slot-scope="scope">
                <el-button type="primary" size="small" @click="recoverWorkOrder(scope.row)">回复工单</el-button>
                <el-button type="primary" size="small" @click="lookHistory(scope.row)">历史信息</el-button>
                <el-button type="primary" size="small" @click="offWorkOrder(scope.row)"
                           :disabled="scope.row.issue_status==6">关闭工单
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="已关闭" name="second">
          <el-table class="table" :data="tableData1" style="width: 100%" height="650" border>
            <el-table-column align="center" prop="title" label="标题" min-width="180">
            </el-table-column>
            <el-table-column align="center" prop="description" label="描述" min-width="280"></el-table-column>
            <el-table-column prop="create_date" label="创建时间" min-width="120">
            </el-table-column>
            <el-table-column align="center" label="结束时间" min-width="120">
              <template slot-scope="scope">
                {{ scope.row.finish_date == null ? '未结束' : scope.row.finish_date }}
              </template>
            </el-table-column>
            <el-table-column align="center" label="工单状态" min-width="150">
              <template slot-scope="scope">zh
                {{ getResult(scope.row.issue_status) }}
              </template>
            </el-table-column>
            <el-table-column align="center" label="操作" width="280">
              <template slot-scope="scope">
                <el-button type="primary" size="small" @click="recoverWorkOrder(scope.row)"
                           :disabled="scope.row.issue_status==6">回复工单
                </el-button>
                <el-button type="primary" size="small" @click="lookHistory(scope.row)">历史信息</el-button>
                <el-button type="primary" size="small" @click="offWorkOrder(scope.row)"
                           :disabled="scope.row.issue_status==6">关闭工单
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>
    </el-card>

    <el-dialog title="新增工单" :visible.sync="dialogFormVisible" width="35%" class="dialog">
      <el-form :model="form" ref="form" :rules="rules" label-width="120px">
        <el-form-item label="标题:" prop="title">
          <el-input v-model="form.title" placeholder="请输入工单标题"></el-input>
        </el-form-item>
        <el-form-item label="工单描述:" prop="description">
          <el-input type="textarea" :rows="2" v-model="form.description" placeholder="请输入工单描述"></el-input>
        </el-form-item>
        <el-form-item label="关联项:" prop="description">
          <el-select v-model="select1" placeholder="请选择关联项">
            <el-option label="我的资源" value="1"></el-option>
            <el-option label="订单" value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="我的资源:" prop="assets" v-if="select1=='1'">
          <div class="orderList">
            <el-radio-group v-model="form.radio">
              <el-radio label="3">备选项</el-radio>
            </el-radio-group>
          </div>
        </el-form-item>
        <el-form-item label="订单号:" prop="radio" v-if="select1=='2'">
          <div class="orderList">
            <el-radio-group v-model="form.radio">
              <el-radio :label="item.id" v-for="(item,index) in orderList" :key="index">{{ item.id }}</el-radio>
            </el-radio-group>
          </div>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="cancel">取 消</el-button>
        <el-button type="primary" size="small" @click="addWorkOrder()">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 回复弹窗 -->
    <el-dialog title="回复" :visible.sync="dialog" width="35%" class="dialog">
      <el-form :model="recoverForm" ref="recoverForm" :rules="recoverRules" label-width="120px">
        <el-form-item label="回复:" prop="handle_text">
          <el-input type="textarea" :rows="2" v-model="recoverForm.handle_text" placeholder="请输入回复内容"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="recoverCancel">取 消</el-button>
        <el-button type="primary" size="small" @click="recoverOnsubmit()">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 历史信息弹窗 -->
    <el-dialog title="历史信息" :visible.sync="historyDialog" width="40%" class="historyDialog">
      <el-table :data="historyInfo" style="width: 100%" height="300">
        <el-table-column prop="handleridname" label="发件人" width="100px">
        </el-table-column>
        <el-table-column prop="handle_at" label="时间" width="160px">
        </el-table-column>
        <el-table-column prop="handle_text" label="内容" :show-overflow-tooltip="true">
        </el-table-column>
      </el-table>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" size="small" @click="cancelHistory()">关闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import {getOrderAPI} from '@/api/product/product'
import {
  getWorkOrderAPI,
  addWorkOrderAPI,
  closeWorkOrderAPI,
  userRecoverWorkOrderAPI,
  getHisOrderAPI
} from "@/api/customer/issues";

export default {
  data() {
    return {
      dialog: false,
      activeName: "first",
      formLabelWidth: "120px",
      dialogFormVisible: false,
      historyDialog: false,
      searchValue: "",
      select: "",
      select1: "",
      radio: "",
      resourceid: "",
      tableData: [],
      tableData1: [],
      orderList: [],
      historyInfo: [],
      page: 1,
      form: {
        title: "",
        description: "",
        radio: ""
      },
      recoverForm: {
        handle_text: ""
      },
      userId: sessionStorage.getItem('userId'),
      issueid: null,
      rules: {
        title: [
          {required: true, message: "请输入工单标题", trigger: "blur"},
        ],
        description: [
          {required: true, message: "请输入工单描述", trigger: "blur"},
        ],
        radio: [
          {required: true, message: "请选择订单", trigger: "blur"},
        ],
        assets: [
          {required: true, message: "请选择资源", trigger: "blur"},
        ],
      },
      recoverRules: {
        handle_text: [
          {required: true, message: "请输入工单标题", trigger: "blur"},
        ],
      },
    };
  },
  created() {
    this.getWorkOrder();
  },
  methods: {
    selectSearch() {//input事件

    },
    search() {   //点击搜索事件

    },

    getWorkOrder() { //获取工单
      getWorkOrderAPI({page: this.page}).then((res) => {
        if (res.status == true) {
          // console.log(res);
          this.tableData = res.data.rows.filter(res => {
            // console.log(res);
            return res.issue_status != 6
          })
          this.tableData1 = res.data.rows.filter(res => {
            return res.issue_status == 6
          })
        }


      });
    },
    getOrderList() {//获取订单
      getOrderAPI({}).then(res => {
        this.orderList = res.data
      })
    },
    lookHistory(row) {//查看历史回复
      this.historyDialog = true
      getHisOrderAPI({issueid: row.id}).then(res => {
        this.historyInfo = res.data
      })
    },
    addIssue() {
      this.select1 = ""
      this.dialogFormVisible = true;
      this.getOrderList()
    },
    recoverWorkOrder(row) {
      this.dialog = true
      this.issueid = row.id
    },
    recoverOnsubmit() {//回复
      userRecoverWorkOrderAPI({issueid: this.issueid, handle_text: this.recoverForm.handle_text}).then(res => {
        console.log(res);
        if (res.status == true) {
          this.$message({
            message: "回复成功",
            type: "success",
          });
          this.getWorkOrder()
          this.dialog = false
          this.$refs.recoverForm.resetFields()
        } else {
          this.$message({
            message: res.msg,
            type: "error",
          });
        }
      })
    },
    addWorkOrder() { //添加工单
      let params = {
        title: this.form.title,
        description: this.form.description
      }
      if (this.select1 == 1) {
        params.resourceid = this.form.radio
      }
      if (this.select1 == 2) {
        params.orderid = this.form.radio
      }
      addWorkOrderAPI(params).then((res) => {
        // console.log(res);
        this.$refs.form.validate((valid) => {
          if (valid) {
            if (res.status == true) {
              this.$message({
                message: '添加工单成功',
                type: 'success'
              })
              this.$refs.form.resetFields()
              this.select = ""
              this.dialogFormVisible = false
              this.getWorkOrder();
            } else {
              this.$message({
                message: res.msg,
                type: 'erroe'
              })
            }
          } else {
            this.$message({
              message: res.msg,
              type: 'erroe'
            })
          }
        })

      });
    },

    offWorkOrder(row) {//关闭工单
      this.$confirm("确定关闭订单?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          closeWorkOrderAPI({id: row.id}).then((res) => {
            if (res.status == true) {
              this.$message({
                message: "订单关闭成功",
                type: "success",
              });
              this.getWorkOrder();

            } else {
              this.$message({
                message: res.msg,
                type: "error",
              });
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消关闭",
          });
        });
    },

    cancel() {//取消添加
      this.dialogFormVisible = false;
      this.select1 = ""
      this.$refs.form.resetFields()
    },
    recoverCancel() {
      this.dialog = false
    },
    cancelHistory() {
      this.historyDialog = false
    },
    getResult(data) {
      switch (data) {
        case '0':
          return "待处理";
        case '1':
          return "已同步供应商";
        case '2':
          return "供应商已完成";
        case '3':
          return "供应商拒绝";
        case '4':
          return "本地处理中";
        case '5':
          return "已完成";
        case '6':
          return "已关闭";
      }
    },
  },
};
</script>

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

  .table {
    ::v-deep .hidden-row {
      display: none;
    }
  }

  .search {
    text-align: left;

    .input-with-select {
      width: 35%;

      .searchSelect {
        width: 110px;
      }

      .searchSelectIcon {
        width: 30px;
      }
    }
  }

  .workOrderList {
    height: calc(100vh - 180px);
    margin-top: 5px;
  }

  .dialog {
    .orderList {
      height: 150px;
      overflow-y: scroll;
    }
  }
}

.btnStyleView {
  display: flex;
  justify-content: center;
  align-items: center;
}

@media (max-width: 768px) {
  .el-table__body-wrapper {
    overflow-x: auto;
  }

  .el-table td, .el-table th {
    white-space: nowrap;
  }
}

</style>
