<template>
  <div>
    <div class="mainContainer">
      <el-form :inline="true" :model="filterForm" class="filter-form" label-width="110px" :label-position="labelPosition">
        <el-row>
          <el-form-item label="工单状态">
            <el-radio-group v-model="filterForm.status" size="mini">
              <el-radio-button :label="0">全部</el-radio-button>
              <el-radio-button v-for="itm in optionsData.statuses" :label="itm.status" :key="itm.status">{{itm.name}}（{{itm.count}}）</el-radio-button>
            </el-radio-group>
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item label="工单类别">
            <el-radio-group v-model="filterForm.type" size="mini">
              <el-radio-button :label="0">全部</el-radio-button>
              <el-radio-button v-for="itm in optionsData.types" :label="itm.type" :key="itm.type">{{itm.name}}（{{itm.count}}）</el-radio-button>
            </el-radio-group>
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item label="创建时间">
            <el-date-picker
              size="small"
              style="width: 360px;"
              v-model="timeRange"
              type="daterange"
              align="left"
              unlink-panels
              range-separator="到"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="yyyy-MM-dd"
              :picker-options="pickerOptions"
            ></el-date-picker>
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item label="工单负责人">
            <el-radio-group v-model="filterForm.manager" size="mini">
              <el-radio-button :label="0">全部</el-radio-button>
              <el-radio-button v-for="itm in optionsData.managers" :label="itm.uid" :key="itm.uid">{{itm.nickname}}（{{itm.count}}）</el-radio-button>
            </el-radio-group>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="searchManage()" size="small">查询</el-button>
          </el-form-item>
          <el-form-item style="float: right;margin-right: 20px;">
            <el-button type="primary" size="small" icon="el-icon-circle-plus-outline" @click="addDialog = true">新建工单</el-button>
          </el-form-item>
        </el-row>
      </el-form>
      <el-table :data="workorderList" border >
        <el-table-column prop="status" label="工单状态">
          <template slot-scope="scope">
            <span :class="'status-' + scope.row.status">{{scope.row.status_name}}</span>
          </template>
        </el-table-column>
        <el-table-column label="客户信息">
          <template slot-scope="scope">
            <span class="lblue point" v-if="scope.row.user.uid">
              <a target="_blank" :href="scope.row.host+'/rooter/user/'+scope.row.user.uid">{{scope.row.user.nickname}}（{{scope.row.user.uid}}）</a>
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="type_name" label="工单类别"></el-table-column>
        <el-table-column prop="source_type" label="来源"></el-table-column>
        <el-table-column label="负责人">
          <template slot-scope="scope" v-if="scope.row.manager.uid">
            <span class="lblue point">
              <a target="_blank" :href="scope.row.host+'/rooter/user/'+scope.row.manager.uid">{{scope.row.manager.nickname}}（{{scope.row.manager.uid}}）</a>
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="create_time" label="创建时间"></el-table-column>
        <el-table-column label="工单详情">
          <template slot-scope="scope">
            <span v-if="scope.row.type != '2'">{{scope.row.content}}</span>
            <span v-else>
              被举报人：
              <span class="lblue point">
                <a target="_blank" :href="scope.row.host+'/rooter/user/'+scope.row.content.reported_uid">{{scope.row.content.reported_nickname}}（{{scope.row.content.reported_uid}}）</a>
              </span><br>
              类型：{{scope.row.content.type}}<br>
              举报内容：{{scope.row.content.content}}
            </span>
          </template>
        </el-table-column>
        <el-table-column label="备注">
          <template slot-scope="scope">
            <div>{{ scope.row.remark_text }}</div>
            <el-button type="text" @click="onToList(scope.row)">查看备注({{ scope.row.remark_num }})</el-button>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="200">
          <template slot-scope="scope">
            <el-button size="mini" type="primary" @click="onRemark(scope.row)">添加备注</el-button>
            <el-button size="mini" type="primary" @click="editData(scope.row)">修改工单</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div class="page">
      <el-pagination
        class="order-footer"
        background
        layout="total, prev, pager, next"
        :page-size="20"
        :total="total"
        @current-change="handleCurrentChange"
      />
    </div>

    <el-dialog title="创建工单" :visible.sync="addDialog" width="600px">
      <el-form :model="add_form" :label-position="labelPosition" label-width="90px">
        <el-form-item label="工单状态">
          <el-radio-group v-model="add_form.status" size="mini">
            <el-radio-button v-for="itm in optionsData.statuses" :label="itm.status" :key="itm.status">{{itm.name}}</el-radio-button>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="工单类别">
          <el-radio-group v-model="add_form.type">
            <el-radio v-for="itm in optionsData.radio_types" :label="itm.type" :key="itm.type" :value="itm.type">{{itm.name}}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="工单负责人">
          <el-select v-model="add_form.manager" placeholder="请选择负责人">
            <el-option v-for="(itm, idx) of optionsData.managers" :label="itm.nickname" :key="idx" :value="itm.uid"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="工单详情">
          <el-input type="textarea" v-model="add_form.content" rows="4"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="medium" @click="addDialog = false">取消</el-button>
        <el-button size="medium" type="primary" @click="formAdd">确定</el-button>
      </div>
    </el-dialog>

    <el-dialog title="修改工单" :visible.sync="editDialog" width="600px">
      <el-form :model="edit_form" :label-position="labelPosition" label-width="90px">
        <el-form-item label="工单状态">
          <el-radio-group v-model="edit_form.status" size="mini">
            <el-radio-button v-for="itm in optionsData.statuses" :label="itm.status" :key="itm.status">{{itm.name}}</el-radio-button>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="工单负责人">
          <el-select v-model="edit_form.manager" placeholder="请选择负责人">
            <el-option v-for="(itm, idx) of optionsData.managers" :label="itm.nickname" :key="idx" :value="itm.uid"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="工单详情" v-if="edit_form.type != '2'">
          <el-input type="textarea" v-model="edit_form.content" rows="4"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="medium" @click="editDialog = false">取消</el-button>
        <el-button size="medium" type="primary" @click="formUpdate">确定</el-button>
      </div>
    </el-dialog>

    <el-dialog title="添加备注" :visible.sync="remarkModel">
      <div>
        <el-input
          type="textarea"
          :rows="5"
          placeholder="请输入内容"
          v-model="remarkData.content">
        </el-input>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="remarkModel = false">取 消</el-button>
        <el-button type="primary" :loading="loading" @click="onRemarkSave">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      page: 1,
      total: 0,
      loading: false,
      remarkModel: false,
      remarkType: 6,
      remarkData: {id: '0', content: ''},
      labelPosition: 'left',
      filterForm: {
        status: 0,
        type: 0,
        manager:0,
      },
      workorderList: [],
      timeRange: [],
      optionsData: [],
      addDialog: false,
      add_form: {
        status: 1,
        type: 1,
        manager: '',
        content: ''
      },
      editDialog: false,
      edit_form: {
        id: 0,
        status: 1,
        manager: 0,
        content: '',
        type:0
      },
      pickerOptions: {
        shortcuts: [
          {
            text: "全部",
            onClick(picker) {
              this.timeRange = [];
              picker.$emit("pick", []);
            }
          },
          {
            text: "最近7天",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近30天",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "本周",
            onClick(picker) {
              let week = new Date().getDay() - 1;
              if (week == -1) {
                week = 6;
              }
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * week);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "本月",
            onClick(picker) {
              let month = new Date().getMonth + 1;
              let year = new Date().getFullYear();
              let day = new Date().getDate() - 1;

              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * day);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "本年",
            onClick(picker) {
              let month = new Date().getMonth + 1;
              let year = new Date().getFullYear();
              let day = new Date().getDate() - 1;
              let firstDay = new Date(year, 0, 1);
              let dateDiff = new Date() - firstDay;
              let msPerDay = 1000 * 60 * 60 * 24;
              //计算天数
              let diffDays = Math.ceil(dateDiff / msPerDay) - 1;
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * diffDays);
              picker.$emit("pick", [start, end]);
            }
          }
        ]
      },
    }
  },
  mounted() {
    this.getOptions();
    this.getList();
  },
  methods: {
    async getList() {
      const page = this.page;
      const data = {
        page,
        type: this.filterForm.type,
        status: this.filterForm.status,
        manager: this.filterForm.manager
      };
      if (this.timeRange != null) {
        data.start_time = this.timeRange[0];
        data.end_time = this.timeRange[1];
      }

      let res = await this.$post("/api/admin/workorder/getList", data);
      if (res && res.status === 1) {
        this.workorderList = res.data.list || [];
        this.total = res.data.total * 1;
      }
    },
    async getOptions() {
      let res = await this.$post("/api/admin/workorder/getOptions");
      if (res && res.status === 1) {
        this.optionsData = res.data;
      }
    },
    searchManage() {
      this.page = 1;
      this.getList();
    },
    onRemark(row) {
      this.remarkData.id = row.id;
      this.remarkType = row.remark_type;
      this.remarkModel = true;
    },
    onToList(row) {
      let data = {
        obj_id: row.id,
        type: row.remark_type
      }
      this.$router.push({path: '/main/remark_list', query: data});
    },
    async onRemarkSave() {
      this.loading = true;
      if (this.remarkData.content === '' || this.remarkData.id === '0') {
        this.$message.error('请输入内容')
        this.loading = false
        return false
      }

      let data = {content: this.remarkData.content, id: this.remarkData.id, type:this.remarkType}
      let res = await this.$post("/api/admin/workorder/saveRemark", data);
      if (res && res.status === 1) {
        this.$message.success('备注成功')
        this.remarkModel = false
        this.getList()
      }
      this.loading = false
    },
    handleCurrentChange(val) {
      this.page = val;
      this.getList();
    },

    formAdd() {
      this.$post("/api/admin/workorder/add", this.add_form).then(res => {
        if (res && res.status === 1) {
          this.getList();
          this.$message.success('添加成功')
          this.addDialog = false;
        }
      });

    },

    formUpdate() {
      this.$post("/api/admin/workorder/update", this.edit_form).then(res => {
        if (res && res.status === 1) {
          this.getList();
          this.$message.success('修改成功')
          this.editDialog = false;
        }
      });

    },

    editData(row) {
      this.edit_form.id = row.id;
      this.edit_form.status = row.status;
      this.edit_form.manager = row.manager.uid;
      this.edit_form.content = row.content;
      this.edit_form.type = row.type;
      this.editDialog = true;
    }

  }

}
</script>

<style scoped>

.page {
  margin-top: 10px;
}
.filter-form .el-form-item{
  margin-bottom: 0;
}
.filter-form{
  margin-bottom: 10px;
}
.status-1 {
  color:#909399;
}
.status-2 {
  color:#E6A23C;
}
.status-3 {
  color:#67C23A;
}
.status-4 {
  color:#409EFF;
}
</style>
