<template>
  <el-container>
    <el-header>
      <div class="left-panel">
        <el-button
          type="primary"
          icon="el-icon-plus"
          @click="add"
        >新建项目</el-button>
        <el-select
          v-model="query.purpose"
          placeholder="来访事由"
          @change="handleQuery"
          clearable
          style="margin-left: 2px"
        >
          <el-option
            v-for="item in purposeOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
        <el-date-picker
          v-model="timeRange"
          type="datetimerange"
          range-separator="至"
          start-placeholder="来访时间始"
          end-placeholder="来访时间止"
          style="margin-left: 2px"
          value-format="YYYY-MM-DD HH:mm:ss"
          @change="handleQuery"
          clearable
        />
      </div>
      <div class="right-panel">
        <div class="right-panel-search">
          <el-input
            v-model="query.search"
            placeholder="名称"
            clearable
            @keyup.enter="handleQuery"
          ></el-input>
          <el-button
            type="primary"
            icon="el-icon-search"
            @click="handleQuery"
          ></el-button>
        </div>
      </div>
    </el-header>
    <el-main class="nopadding">
      <scTable
        ref="table"
        :apiObj="apiObj"
        row-key="id"
        @selection-change="selectionChange"
        stripe
        @resetQuery="resetQuery"
      >
        <el-table-column
          label="#"
          fixed="left"
          type="index"
          width="50"
        ></el-table-column>

        <el-table-column label="来访事由" prop="state" width="100" fixed="left">
          <template #default="scope">{{
            purpose_[scope.row.purpose]
          }}</template>
        </el-table-column>
        <el-table-column
          label="访问级别"
          prop="level"
          min-width="100"
          fixed="left"
        >
          <template #default="scope">
            <el-space v-if="scope.row.level == 10">一般</el-space>
            <el-space v-else>重要</el-space>
          </template>
        </el-table-column>
        <el-table-column
          label="来访单位"
          prop="company"
          min-width="180"
          fixed="left"
        ></el-table-column>
        <el-table-column label="项目状态" prop="state" min-width="180">
          <template #default="scope">{{ state_[scope.row.state] }}</template>
        </el-table-column>
        <el-table-column label="审批状态" min-width="200">
          <template #default="scope">
            <span
              v-if="scope.row.ticket_ && scope.row.ticket_.state_"
              style="margin-right: 5px"
              >{{ scope.row.ticket_.state_.name }}</span
            >
            <el-tag
              v-if="scope.row.ticket_ && scope.row.ticket_.act_state"
              class="mx-1"
              size="small"
              :type="
                scope.row.ticket_.act_state === 0
                  ? ''
                  : scope.row.ticket_.act_state === 1
                  ? ''
                  : scope.row.ticket_.act_state === 2
                  ? 'danger'
                  : scope.row.ticket_.act_state === 3
                  ? 'danger'
                  : scope.row.ticket_.act_state === 5
                  ? 'danger'
                  : scope.row.ticket_.act_state === 4
                  ? 'success'
                  : ''
              "
              >{{ act_states[scope.row.ticket_.act_state] }}</el-tag
            >
          </template>
        </el-table-column>
        <!-- <el-table-column
					label="来访概述"
					prop="name"
					min-width="180"
				></el-table-column> -->
        <el-table-column
          label="来访时间"
          prop="visit_time"
          width="180"
        ></el-table-column>
        <el-table-column
          label="离开时间"
          prop="leave_time"
          width="180"
        ></el-table-column>
        <el-table-column
          label="来访人数"
          prop="count_people"
          min-width="80"
        ></el-table-column>
        <el-table-column label="接待人" prop="receptionist_name" min-width="80">
          <template #default="scope">
            <span v-if="scope.row.receptionist_">{{
              scope.row.receptionist_.name
            }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="创建时间"
          prop="create_time"
          width="180"
        ></el-table-column>
        <el-table-column label="操作" fixed="right" align="left" width="170">
          <template #default="scope">
            <el-button
              link
              v-if="scope.row.state == 10"
              type="primary"
              size="small"
              @click="addpepple(scope.row, scope.$index)"
              >继续编辑
            </el-button>
            <el-button
              link
              type="primary"
              size="small"
              @click="table_show(scope.row, scope.$index)"
              >查看
            </el-button>
            <el-button
              v-if="scope.row.state != 30"
              link
              type="danger"
              size="small"
              @click="table_del(scope.row)"
              >删除
            </el-button>
          </template>
        </el-table-column>
      </scTable>
    </el-main>
    <save-dialog
      v-if="dialog.save"
      ref="saveDialog"
      @success="handleSaveSuccess"
      @closed="dialog.save = false"
    ></save-dialog>
    <detial-dialog v-if="dialog.save" ref="detialDialog"></detial-dialog>
  </el-container>
</template>
<script>
// import saveDialog from "./visit_form.vue";
import detialDialog from "./visit_detial.vue";

export default {
  name: "visit",
  components: {
    // saveDialog,
    detialDialog,
  },
  data() {
    return {
      timeRange: [],
      dialog: {
        save: false,
        permission: false,
      },
      apiObj: this.$API.vm.visit.list,
      query: {},
      selection: [],
      search: {
        keyword: null,
      },
      purposeOptions: [
        { label: "参观", value: 10 },
        { label: "拜访", value: 20 },
        { label: "面试", value: 30 },
        { label: "开会", value: 40 },
        { label: "拉送货", value: 50 },
        { label: "其他", value: 60 },
      ],
      purpose_: {
        10: "参观",
        20: "拜访",
        30: "面试",
        40: "开会",
        50: "拉送货",
        60: "其他"
      },
      state_: {
        10: "创建中",
        20: "审批中",
        30: "待入厂",
        40: "进行中",
        50: "已完成",
        60: "已关闭",
      },
      act_states: {
        0: "草稿中", //p
        1: "进行中", //p

        2: "被退回", //d
        3: "被撤回", //d

        4: "已完成", //s
        5: "已关闭", //d
      },
    };
  },
  methods: {
    //添加
    add() {
      // this.dialog.save = true;
      // this.$nextTick(() => {
      //   this.$refs.saveDialog.open("add");
      // });
      this.$router.push({
        name: "vistoradd",
      });
    },
    addpepple(row) {
      this.$router.push({
        name: "vistoradd",
        query: {
          visitid: row.id, //访问项目id
        },
      });
    },

    //查看
    table_show(row) {
      this.dialog.save = true;
      this.$nextTick(() => {
        this.$refs.detialDialog.open("show").setData(row);
      });
    },

    //权限设置
    permission() {
      this.dialog.permission = true;
      this.$nextTick(() => {
        this.$refs.permissionDialog.open();
      });
    },
    //删除
    table_del(row) {
      this.$API.vm.visit.delete
        .req(row.id)
        .then((res) => {
          this.$message.success("删除成功");
          this.$refs.table.refresh();
          return res;
        })
        .catch((err) => {
          return err;
        });
    },

    //表格选择后回调事件
    selectionChange(selection) {
      this.selection = selection;
    },

    //本地更新数据
    handleSaveSuccess(data, mode) {
      if (mode == "add") {
        this.$refs.table.refresh();
      } else if (mode == "edit") {
        this.$refs.table.refresh();
      }
    },
    resetQuery() {
      this.query = {};
    },
    handleQuery() {
      if (this.timeRange) {
        this.query.start_come = this.timeRange[0];
        this.query.end_come = this.timeRange[1];
      } else {
        this.query.end_come = null;
        this.query.start_come = null;
      }
      this.$refs.table.queryData(this.query);
    },
  },
};
</script>
