<template>
  <div class="community">
    <el-breadcrumb separator="/" class="bread_crumb1 bread_left">
      <el-breadcrumb-item :to="{ path: '/user' }">
        {{ $t("lang.personal_center") }}
      </el-breadcrumb-item>
      <el-breadcrumb-item>
        {{ $t("lang.my_questions_and_answers") }}
      </el-breadcrumb-item>
    </el-breadcrumb>
    <div class="from_content1 form_input_block">
      <inline-form
        class="form"
        :data="form_data"
        @serach="get_search_list"
      ></inline-form>
    </div>
    <div class="from_content form_list_block">
      <table-btn
        class="from_content_btn"
        :data="btn_data"
        :num="num"
        @deleteData="deleteData"
        @clean="clean"
      ></table-btn>
      <apass-table
        class="from_content_table"
        height="calc(100% - 20px)"
        ref="outtreetable"
        @selectnum="selectnum"
        v-if="tableData.length"
        :data="tableData"
        :header="table_header"
        @gotodetail="gotodeta"
      ></apass-table>
      <list-pagination
        v-if="tableData.length"
        :total="total_list"
        :page-sizes="[50, 20, 10]"
        :page-size="currentlimit"
        :current-page="currentPage"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      ></list-pagination>
    </div>
    <el-dialog
      title="提示"
      :visible.sync="diaDel"
      width="440px"
      :modal-append-to-body="false"
    >
      <div class="dia_reason">
        <el-form ref="form1" :model="reason_form" :rules="reason_rules">
          <el-form-item class="dia_item">
            <p>删除理由：</p>
            <el-input
              type="textarea"
              v-model="reason_form.reason"
              placeholder="请输入至少五个字符，至多20字符"
            ></el-input>
          </el-form-item>
        </el-form>
      </div>
      <div class="dia_btn_footer">
        <el-button class="previous" @click="cancelDiaDel">取消</el-button>
        <el-button class="registe" @click="submitDel">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import inlineForm from "@/components/new-com/inlineForm";
import tableBtn from "@/components/new-com/tableBtn";
import apassTable from "@/components/new-com/apassTable";
import ListPagination from "@/components/comments-pagination";
import apassDialog from "@/components/apass-dialog";
import helper from "@/services/helper.js";
export default {
  components: {
    inlineForm,
    tableBtn,
    apassTable,
    ListPagination,
    apassDialog,
  },
  data() {
    return {
      search_ask: "",
      search_user: "",
      search_date: [],
      tableData: [],
      table_header: [],
      total_list: 0,
      currentPage: 1,
      currentlimit: 10,
      form_data: [
        {
          label: "问题搜索",
          type: "input",
          placeholder: "请输入问题标题或内容关键词",
          key: "ask",
        },
        {
          label: "发布人搜索",
          type: "input",
          placeholder: "请输入发布人名称",
          key: "user",
        },
        {
          label: "发布时间",
          type: "daterange",
          placeholder: "请选择",
          key: "date",
        },
      ],
      btn_data: [
        {
          position: "left",
          label: "批量删除",
          type: "warn",
          func: "deleteData",
        },
      ],
      num: 0,
      selected_date: [],
      role_type: "",
      now_state: "",
      diaDel: false,
      reason_form: {
        reason: "",
      },
      reason_rules: {
        reason: [
          {
            required: true,
            max: 20,
            min: 5,
            message: "请填写活动形式",
            trigger: "blur",
          },
        ],
      },
    };
  },
  watch: {
    $route(to, from) {
      this.now_state = to.path;
      this.currentPage = 1;
      this.currentlimit = 10;
      this.total_list = 0;
      this.changeState(this.now_state);
    },
  },
  created() {},
  methods: {
    getRouter() {
      let this_route = this.$route.path;
      this.now_state = this_route;
      this.changeState(this.now_state);
    },
    deleteData() {
      if (this.selected_date.length) {
        this.diaDel = true;
      } else {
        this.$message.error("请先选择要删除的数据");
      }
    },
    handleSizeChange(val) {
      console.log(val);
      this.currentlimit = val;
      this.currentPage = 1;
      this.changeState(this.now_state);
    },
    handleCurrentChange(val) {
      console.log(val);
      this.currentPage = val;
      this.changeState(this.now_state);
    },
    get_search_list(val) {
      if (val) {
        this.search_ask = val.ask;
        this.search_user = val.user;
        this.search_date = val.date;
      } else {
        this.search_ask = "";
        this.search_user = "";
        this.search_date = [];
      }
      this.currentPage = 1;
      this.changeState(this.now_state);
    },
    clean() {
      this.$refs.outtreetable.cleanSel();
    },
    selectnum({ select, rows }) {
      this.num = select.length;
      this.selected_date = select;
    },
    cancelDiaDel() {
      this.diaDel = false;
    },
    submitDel() {
      this.$refs.form1.validate((valid) => {
        if (valid) {
          this.diaDel = false;
          if (this.now_state == "/qa/questions") {
            this.delQ();
          } else if (this.now_state == "/qa/answers") {
            this.delA();
          }
        } else {
        }
      });
    },
    del_q(val) {
      this.selected_date = [{ id: val.id }];
      this.diaDel = true;
    },
    del_a(val) {
      this.selected_date = [{ id: val.id }];
      this.diaDel = true;
    },
    getQList() {
      let query = {
        search: this.search_ask,
        style: 3,
        create_user: this.search_user,
        start: this.search_date.length != 0 ? this.search_date[0] : "",
        end: this.search_date.length != 0 ? this.search_date[1] : "",
        limit: this.currentlimit,
        page: this.currentPage,
        order: "created",
      };
      this.$api.user.getQuestionList(query).then((response) => {
        if (response.data.success == 1) {
          this.tableData = response.data.data;
          this.total_list = response.data.total;
        }
      });
    },
    getAList() {
      let query = {
        search: this.search_ask,
        style: 3,
        create_user: this.search_user,
        start: this.search_date.length != 0 ? this.search_date[0] : "",
        end: this.search_date.length != 0 ? this.search_date[1] : "",
        limit: this.currentlimit,
        page: this.currentPage,
      };
      this.$api.user.getAnswerList(query).then((response) => {
        if (response.data.success == 1) {
          this.tableData = response.data.data;
          this.total_list = response.data.total;
        }
      });
    },
    delQ() {
      let items = [];
      this.selected_date.forEach((item) => {
        items.push({ id: item.id, reason: this.reason_form.reason });
      });
      this.$api.user.delQuestions(items).then((response) => {
        if (response.data.success == 1) {
          this.$message({
            message: "删除成功",
            type: "success",
          });
        }
      });
    },
    delA() {
      let items = [];
      this.selected_date.forEach((item) => {
        items.push({ id: item.id, reason: this.reason_form.reason });
      });
      this.$api.user.delAnswers(items).then((response) => {
        if (response.data.success == 1) {
          this.$message({
            message: "删除成功",
            type: "success",
          });
        }
      });
    },
    gotodeta(val) {
      this.$router.push("/technical_support/answer_center/detail/" + val);
    },
    changeState(val) {
      this.tableData = [];
      this.table_header = [];
      if (val == "/qa/questions") {
        this.form_data[1].label = "发布人搜索";
        this.form_data[2].label = "发布时间";
        this.table_header = [
          {
            prop: "title",
            label: "问题标题",
            align: "left",
            type: "html",
            getHtml: (str) => {
              return `<span style="color:#0f2683;font-weight:bold;width: 100%;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;cursor: pointer;" title="${str.title}" onclick="gotodetail(${str.question_id})">${str.title}</span>`;
            },
          },
          {
            prop: "content",
            label: "问题内容",
            align: "left",
            type: "html",
            getHtml: (str) => {
              return `<span style="width: 100%;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;" title="${str.content.replace(
                /<[^<>]+>/g,
                ""
              )}">${str.content.replace(/<[^<>]+>/g, "")}</span>`;
            },
          },
          {
            prop: "answer_num",
            label: "回复数",
            align: "center",
          },
          {
            prop: "view",
            label: "浏览数",
            align: "center",
          },
          {
            prop: "user_name",
            label: "发布人",
            align: "center",
          },
          {
            prop: "created",
            label: "发布时间",
            align: "center",
            type: "html",
            getHtml: (str) => {
              return `<span>${helper.dateStringTransform(str.created)}</span>`;
            },
          },
          {
            label: "操作",
            type: "buttons",
            width: "120px",
            align: "center",
            actionList: [
              {
                label: "删除",
                callback: this.del_q,
              },
            ],
          },
        ];
        this.getQList();
      } else if (val == "/qa/answers") {
        this.form_data[1].label = "回复人搜索";
        this.form_data[2].label = "回复时间";
        this.table_header = [
          {
            prop: "content",
            label: "回答内容",
            align: "left",
            type: "html",
            getHtml: (str) => {
              return `<span style="color:#0f2683;font-weight:bold;width: 100%;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;cursor: pointer;" title="${str.answer}" onclick="gotodetail(${str.question_id})">${str.answer}</span>`;
            },
          },
          {
            prop: "title",
            label: "问题标题",
            align: "left",
            type: "html",
            getHtml: (str) => {
              return `<span style="width: 100%;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;" title="${str.title}">${str.title}</span>`;
            },
          },
          {
            prop: "question_content",
            label: "问题内容",
            align: "left",
            type: "html",
            getHtml: (str) => {
              return `<span style="width: 100%;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;" title="${str.question_content.replace(
                /<[^<>]+>/g,
                ""
              )}">${str.question_content.replace(/<[^<>]+>/g, "")}</span>`;
            },
          },
          {
            prop: "answer_num",
            label: "回复数",
            align: "center",
          },
          {
            prop: "view",
            label: "浏览数",
            align: "center",
          },
          {
            prop: "user_name",
            label: "回复人",
            align: "center",
          },
          {
            prop: "created",
            label: "回复时间",
            align: "center",
            type: "html",
            getHtml: (str) => {
              return `<span>${helper.dateStringTransform(str.created)}</span>`;
            },
          },
          {
            label: "操作",
            type: "buttons",
            width: "120px",
            align: "center",
            actionList: [
              {
                label: "删除",
                callback: this.del_a,
              },
            ],
          },
        ];
        this.getAList();
      }
    },
  },
  mounted() {
    this.getRouter();
  },
};
</script>

<style scoped>
.community {
  height: calc(100%);
  overflow: hidden;
}
.form_list_block {
  height: calc(100% - 180px);
}
.dia_item {
  width: 100%;
  margin-bottom: 12px;
}
.dia_item p {
  padding-left: 15px;
  color: #58617a;
}
.dia_btn_footer {
  display: flex;
  justify-content: flex-end;
  margin: 30px 0 0;
}
.previous {
  width: 100px;
  background-color: #c3caf8;
  color: #0f2683;
}
.registe {
  width: 100px;
  background-color: #0f2683;
  color: #f8f9fd;
}
.dia_reason {
  text-align: left;
}
</style>
<style>
.dia_reason .el-textarea__inner {
  border-radius: 8px;
  background-color: #f7f8f9;
}
</style>
