<template>
  <q-card class="q-px-md" style="width:600px;">
    <q-card-section class="row items-center q-pb-none">
      <div class="text-h6">
        {{ type == 3 ? "Key Result" : type == 2 ? "objective" : "周期" }}
        权限设置
      </div>
      <q-space />
      <q-btn icon="close" flat round dense v-close-popup />
    </q-card-section>

    <q-card-section>
      <q-banner
        rounded
        class="bg-orange-2 text-black q-py-none q-px-md q-mb-md"
        style="min-height:30px;"
      >
        <div class="row items-center">
          <span class="q-mr-md">
            <inline-svg
              class="svg-icon svg-icon-orange"
              src="icons/svg/Code/Warning-2.svg"
            ></inline-svg>
          </span>
          <span style="font-size:12px;"
            >默认权限范围内的人可查看你的 Key Result，如需保密请移除</span
          >
        </div>
      </q-banner>
      <div class="flex row">
        <div class="q-mr-md">
          <q-select
            dense
            standout
            behavior="menu"
            :options="groupData"
            option-label="name"
            option-value="id"
            v-model="defaultGroupType"
            @input="changeType"
          ></q-select>
        </div>
        <div class="col relative-position">
          <q-input
            standout
            bottom-slots
            v-model="searchText"
            placeholder="输入你需要搜索的内容"
            dense
            @input="querySearch"
          >
            <template v-slot:append>
              <inline-svg
                class="svg-icon svg-icon-primary"
                src="icons/svg/General/Search.svg"
              ></inline-svg>
            </template>
          </q-input>
          <div
            style="width:100%;margin-top:45px;max-height:300px;"
            class="bg-grey-1 q-py-xs absolute-top-left shadow-3 rounded-borders scroll myscroll"
            v-if="showResult"
          >
            <q-list v-if="defaultGroupType.id == 1">
              <q-item
                class="rounded-borders"
                @click="createPwoer(x.Id, x.EmployeeName)"
                clickable
                v-ripple
                v-for="(x, i) in usersList"
                :key="`parent_${x.Id}`"
              >
                <q-item-section avatar>
                  <q-avatar
                    style="background-color: #F3F6F9;"
                    rounded
                    size="40px"
                    text-color="secondary"
                  >
                    <img :src="x.UserIcon" v-if="x.UserIcon" />
                    <span v-else>{{ x.EmployeeName.substring(0, 1) }}</span>
                  </q-avatar>
                </q-item-section>
                <q-item-section>
                  <q-item-label class="font-pfb">{{
                    x.EmployeeName
                  }}</q-item-label>
                  <q-item-label caption class="remark-font"
                    >{{ x.DeptName }}·{{ x.PostName }}</q-item-label
                  >
                </q-item-section>
              </q-item>
            </q-list>
            <q-list v-if="defaultGroupType.id == 2">
              <q-item
                class="rounded-borders"
                @click="createPwoer(x.DeptId, x.DeptName)"
                clickable
                v-ripple
                v-for="(x, i) in deptsList"
                :key="i"
              >
                <q-item-section avatar>
                  <q-avatar
                    rounded
                    size="40px"
                    text-color="warning"
                    color="orange-1"
                  >
                    <span>{{ x.DeptName.substring(0, 1) }}</span>
                  </q-avatar>
                </q-item-section>
                <q-item-section>
                  <q-item-label class="font-pfb">{{ x.DeptName }}</q-item-label>
                  <q-item-label caption class="remark-font">{{
                    x.SchoolName
                  }}</q-item-label>
                </q-item-section>
              </q-item>
            </q-list>
            <q-list v-if="defaultGroupType.id == 3">
              <q-item
                class="rounded-borders"
                @click="createPwoer(x.PostId, x.PostName)"
                clickable
                v-ripple
                v-for="(x, i) in postsList"
                :key="i"
              >
                <q-item-section avatar>
                  <q-avatar
                    rounded
                    size="40px"
                    text-color="purple"
                    color="purple-1"
                  >
                    <span>{{ x.PostName.substring(0, 1) }}</span>
                  </q-avatar>
                </q-item-section>
                <q-item-section>
                  <q-item-label class="font-pfb">{{ x.PostName }}</q-item-label>
                  <q-item-label caption class="remark-font">{{
                    x.SchoolName
                  }}</q-item-label>
                </q-item-section>
              </q-item>
            </q-list>
          </div>
        </div>
        <div class="q-ml-md">
          <q-select
            dense
            standout
            behavior="menu"
            :options="powers"
            option-label="name"
            option-value="id"
            v-model="defaultPower"
          ></q-select>
        </div>
      </div>
      <div class=" scroll" style="height:364px">
        <div class="row items-center" v-if="defaultStatus == 1">
          <q-avatar rounded color="primary" size="36px">
            <inline-svg
              class="svg-icon svg-icon-white"
              src="icons/svg/Code/Git4.svg"
            ></inline-svg>
          </q-avatar>
          <div class="text-subtitle2 col q-mx-md">
            <div>Key Result 默认权限</div>
            <div class="remark-font">
              可查看当前 Objective 的同事可以看到此 Key Result
            </div>
          </div>
          <div class="row" style="height:20px;">
            <span class="text-subtitle2">
              <inline-svg
                class="svg-icon svg-icon-primary"
                src="icons/svg/General/Visible.svg"
              ></inline-svg>
              <q-tooltip content-class="bg-black text-white">可查看</q-tooltip>
            </span>
            <q-separator vertical class="q-mx-md"></q-separator>
            <span title="删除" @click="setDefaultPower(2)">
              <inline-svg
                class="svg-icon svg-icon-g-p"
                src="icons/svg/General/Trash.svg"
                width="20px"
                height="20px"
              ></inline-svg>
            </span>
          </div>
        </div>
        <div
          class="row items-center q-mt-md"
          v-for="(x, i) in powersList"
          :key="i"
        >
          <q-avatar
            style="background-color: #F3F6F9;"
            rounded
            size="36px"
            text-color="secondary"
            v-if="x.Type == 1"
          >
            <span>{{ x.SourceName.substring(0, 1) }}</span>
          </q-avatar>
          <q-avatar
            rounded
            size="40px"
            text-color="warning"
            color="orange-1"
            v-if="x.Type == 2"
          >
            <span>{{ x.SourceName.substring(0, 1) }}</span>
          </q-avatar>
          <q-avatar
            rounded
            size="40px"
            text-color="purple"
            color="purple-1"
            v-if="x.Type == 3"
          >
            <span>{{ x.SourceName.substring(0, 1) }}</span>
          </q-avatar>
          <div class="text-subtitle2 col q-mx-md">
            <div>{{ x.SourceName }}</div>
            <div class="remark-font">
              {{ x.TypeName }}
            </div>
          </div>
          <div class="row" style="height:20px;">
            <span class="text-subtitle2 cursor-pointer" @click="changeState(i)">
              <inline-svg
                v-if="x.State == 1"
                class="svg-icon svg-icon-primary"
                src="icons/svg/General/Visible.svg"
              ></inline-svg>
              <inline-svg
                v-if="x.State == 2"
                class="svg-icon svg-icon-grey"
                src="icons/svg/General/Hidden.svg"
              ></inline-svg>
              <q-tooltip content-class="bg-black text-white"
                >{{ x.State == 1 ? "" : "不" }}可查看</q-tooltip
              >
            </span>
            <q-separator vertical class="q-mx-md"></q-separator>
            <span title="删除" @click="deletePower(i)">
              <inline-svg
                class="svg-icon svg-icon-g-p"
                src="icons/svg/General/Trash.svg"
                width="20px"
                height="20px"
              ></inline-svg>
            </span>
          </div>
        </div>
      </div>
    </q-card-section>
    <q-card-actions class="flex row items-center">
      <div class="col">
        <q-btn flat  color="primary" label="恢复「默认权限」" v-if="defaultStatus==2"  @click="setDefaultPower(1)"/>
      </div>
      <div>
        <q-btn flat label="取消" color="primary q-mr-md" v-close-popup />
        <q-btn label="保存" color="primary" @click="savePower" />
      </div>
    </q-card-actions>
  </q-card>
</template>

<script>
import { queryEmployee } from "../../api/users/user";
import {
  queryPower,
  setPower,
  queryDefaultStatus,
  setDefaultStatus
} from "../../api/okr/work";
import { getDeptList } from "../../api/system/dept";
import { getPostList } from "../../api/system/post";
export default {
  props: ["kr", "type"],
  data() {
    return {
      groupData: [
        {
          id: 1,
          name: "员工"
        },
        {
          id: 2,
          name: "部门"
        },
        {
          id: 3,
          name: "岗位"
        }
      ],
      powers: [
        {
          id: 1,
          name: "可查看"
        },
        {
          id: 2,
          name: "不可查看"
        }
      ],
      defaultGroupType: {},
      defaultPower: {},
      searchText: "",
      usersList: [],
      powersList: [],
      showResult: false,
      deptsList: [],
      postsList: [],
      defaultStatus: -1
    };
  },
  mounted() {
    this.defaultGroupType = this.groupData[0];
    this.defaultPower = this.powers[0];

    this.queryDefaultPower();
    this.queryPowerList();
  },
  methods: {
    setDefaultPower(state) {
      this.defaultStatus = state;
      setDefaultStatus({
        PermissionType: this.type,
        TargetId: this.kr.Id,
        Permission: state
      }).then(r => {});
    },
    queryDefaultPower(state) {
      this.defaultStatus = state;
      queryDefaultStatus({
        PermissionType: this.type,
        TargetId: this.kr.Id
      }).then(r => {
        this.defaultStatus = r.Data;
      });
    },
    changeType() {
      
    },
    querySearch() {
      this.searchText = this.searchText.trim();
      let reg = /[0-9]+/g;
      this.searchText = this.searchText.replace(reg, "");
      if (this.searchText != "") {
        if (this.defaultGroupType.id == 1) {
          this.queryUsers();
        } else if (this.defaultGroupType.id == 2) {
          this.queryDepts();
        } else if (this.defaultGroupType.id == 3) {
          this.queryPost();
        }
      } else {
        this.showResult = false;
      }
    },
    queryPost() {
      getPostList({
        PostName: this.searchText
      }).then(r => {
        this.postsList = r.Data;
        if (this.postsList.length > 0) {
          this.showResult = true;
        }
        
      });
    },
    queryDepts() {
      getDeptList({
        DeptName: this.searchText
      }).then(r => {
        this.deptsList = r.Data;
        if (this.deptsList.length > 0) {
          this.showResult = true;
        }
      });
    },
    queryUsers() {
      queryEmployee({
        EmployeeName: this.searchText,
        IsLeave: 1
      }).then(r => {
        this.usersList = r.Data;
        if (this.usersList.length > 0) {
          this.showResult = true;
        }
      });
    },
    createPwoer(id, name) {
      let pw = this.powersList.find(x => {
        if (x.SourceId == id && x.Type == this.defaultGroupType.id) {
          return x;
        }
      });
      if (pw && pw.Id) {
        if (pw.State != this.defaultPower.id) {
          pw.State = this.defaultPower.id;
        }
      } else {
        let newPw = {
          Id: 0,
          PermissionType: this.type,
          Type: this.defaultGroupType.id,
          TypeName: this.defaultGroupType.name,
          SourceId: id,
          SourceName: name,
          State: this.defaultPower.id
        };
        this.powersList.unshift(newPw);
      }
      this.searchText = "";
      this.showResult = false;
    },
    deletePower(i) {
      this.powersList.splice(i, 1);
    },
    changeState(i) {
      this.powersList[i].State = this.powersList[i].State == 1 ? 2 : 1;
    },
    savePower() {
      setPower({
        PermissionType: this.type,
        TargetId: this.kr.Id,
        List: this.powersList
      }).then(r => {
        this.$emit(
          "save",
          this.powersList.length > 0 || this.defaultStatus == 2
        );
      });
    },
    queryPowerList() {
      queryPower({
        Type: this.type,
        TargetId: this.kr.Id
      }).then(r => {
        this.powersList = r.Data;
      });
    }
  }
};
</script>

<style></style>
