<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"
      ></apass-table>
      <list-pagination
        v-if="tableData.length"
        :total="total_list"
        :page-sizes="[50, 10]"
        :page-size="currentlimit"
        :current-page="currentPage"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      ></list-pagination>
    </div>
  </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";
export default {
  components: {
    inlineForm,
    tableBtn,
    apassTable,
    ListPagination,
    apassDialog,
  },
  data() {
    return {
      search_text: "",
      tableData: [
        {
          user_id: "100021李想李想李想李想李想李想李想李想李想李想",
          user_name: "李想李想李想李想李想李想李想李想李想李想",
          user_type: 1,
          oid: "f49afc8a-e4a5-4f70-8192-bbe2bb36945f",
          org_name: "山西省应急管理厅-应急物资处",
          gender: 2,
          shared_state: 2,
          state: 2,
          operate_user_name: "",
          operate_time: "2020-08-27 14:46:40",
          sort: 1,
        },
      ],
      table_header: [],
      total_list: 0,
      currentPage: 1,
      currentlimit: 50,
      form_data: [
        {
          label: "问题搜索",
          type: "input",
          placeholder: "请输入问题标题或内容关键词",
          key: "name",
        },
        {
          label: "发布人搜索",
          type: "input",
          placeholder: "请输入发布人名称",
          key: "name",
        },
        {
          label: "发布时间",
          type: "daterange",
          placeholder: "请选择",
          key: "name",
        },
      ],
      btn_data: [
        {
          position: "left",
          label: "批量删除",
          type: "warn",
          func: "deleteData",
        },
      ],
      num: 0,
      selected_date: [],
      role_type: "",
    };
  },
  watch: {
    $route(to, from) {
      this.changeState(to.path);
    },
  },
  created() {
    this.getlist();
  },
  methods: {
    getRouter() {
      let this_route = this.$route.path;
      this.changeState(this_route);
    },
    edit_data(val) {},
    deleteData() {
      if (this.selected_date.length) {
        this.$refs.deletelog.show();
      } else {
        this.$message.error("请先选择要删除的数据");
      }
    },
    handleSizeChange(val) {
      console.log(val);
      this.currentlimit = val;
      this.currentPage = 1;
      this.getlist();
    },
    handleCurrentChange(val) {
      console.log(val);
      this.currentPage = val;
      this.getlist();
    },
    //获取列表数据
    getlist() {},
    get_search_list(val) {
      console.log(val);
      if (val) {
        this.search_text = val.name;
        this.role_type = val.type;
      } else {
        this.search_text = "";
      }
      this.currentPage = 1;
      this.getlist();
    },
    clean() {
      this.$refs.outtreetable.cleanSel();
    },
    selectnum({ select, rows }) {
      this.num = select.length;
      this.selected_date = select;
    },
    changeState(val) {
      if (val == "/user/questions") {
        this.table_header = [
          {
            prop: "user_id",
            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;" title="${str.user_id}">${str.user_id}</span>`;
            },
          },
          {
            prop: "user_id",
            label: "问题内容",
            align: "left",
            type: "html",
            getHtml: (str) => {
              return `<span style="width: 100%;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;" title="${str.user_id}">${str.user_id}</span>`;
            },
          },
          {
            prop: "operate_time",
            label: "回复数",
            align: "center",
          },
          {
            prop: "operate_time",
            label: "浏览数",
            align: "center",
          },
          {
            prop: "operate_time",
            label: "发布人",
            align: "center",
          },
          {
            prop: "operate_time",
            label: "发布时间",
            align: "center",
            width: 200,
          },
          {
            label: "操作",
            type: "buttons",
            width: "120px",
            align: "center",
            actionList: [
              {
                label: "修改",
                callback: this.edit_data,
              },
            ],
          },
        ];
      } else {
        this.table_header = [
          {
            prop: "user_id",
            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;" title="${str.user_id}">${str.user_id}</span>`;
            },
          },
          {
            prop: "user_id",
            label: "问题标题",
            align: "left",
            type: "html",
            getHtml: (str) => {
              return `<span style="width: 100%;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;" title="${str.user_id}">${str.user_id}</span>`;
            },
          },
          {
            prop: "user_id",
            label: "问题内容",
            align: "left",
            type: "html",
            getHtml: (str) => {
              return `<span style="width: 100%;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;" title="${str.user_id}">${str.user_id}</span>`;
            },
          },
          {
            prop: "operate_time",
            label: "回复数",
            align: "center",
          },
          {
            prop: "operate_time",
            label: "浏览数",
            align: "center",
          },
          {
            prop: "operate_time",
            label: "回复人",
            align: "center",
          },
          {
            prop: "operate_time",
            label: "回复时间",
            align: "center",
            width: 200,
          },
          {
            label: "操作",
            type: "buttons",
            width: "120px",
            align: "center",
            actionList: [
              {
                label: "修改",
                callback: this.edit_data,
              },
            ],
          },
        ];
      }
    },
  },
  mounted() {
    this.getRouter();
  },
};
</script>

<style scoped>
.community {
  height: calc(100%);
  overflow: hidden;
}
.form_list_block {
  height: calc(100% - 180px);
}
</style>
