<template>
  <el-dialog title="查看" center :visible.sync="visible" width="65%">
    <el-form :model="distributionForm" disabled label-width="140px">
      <el-row>
        <el-col :span="12">
          <el-form-item label="积分包名称" prop="scorePackageName">
            <el-input v-model="distributionForm.scorePackageName" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="所属月份" prop="belongDate">
            <el-input v-model="distributionForm.belongDate" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="关联服务企业" prop="relatedService">
            <el-input v-model="distributionForm.relatedServiceName" />
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="关联积分包名称" prop="relationScoreId">
            <el-input v-model="distributionForm.relationScoreName" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="接包对象" prop="relatedService">
            <el-input v-model="distributionForm.acceptSugName" />
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="可分配积分值">
            <el-input v-model="distributionForm.kfpjf" />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12">
          <el-form-item label="积分包值" prop="score">
            <el-input v-model="distributionForm.score" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="推广产品">
            <el-input
              type="textarea"
              resize="none"
              v-model="distributionForm.drugtableName"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="B端服务上限(%)" prop="entTaskLimit">
            <el-input-number
              v-model="distributionForm.entTaskLimit"
              controls-position="right"
              :min="0"
              :max="100"
              class="input-num-box w100"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="测试试卷">
            <el-input
              type="textarea"
              resize="none"
              v-model="distributionForm.quizNames"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="审核管理费比例(%)">
            <el-input-number
              v-model="distributionForm.auditManagementFeeRates"
              controls-position="right"
              :min="0"
              :max="100"
              class="input-num-box w100"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="截止日期" prop="endTimeValue">
            <el-input v-model="distributionForm.endTime" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="有效任务类型" required>
            <div>
              <div class="treeBox">
                <el-tree
                  ref="tree1"
                  :data="tree1"
                  :default-checked-keys="checkedDsScope"
                  show-checkbox
                  node-key="taskTypeId"
                  :props="defaultProps"
                >
                </el-tree>
              </div>
              <div class="treeBox">
                <el-tree
                  ref="tree2"
                  :data="tree2"
                  :default-checked-keys="checkedDsScope"
                  show-checkbox
                  node-key="taskTypeId"
                  :props="defaultProps"
                >
                </el-tree>
              </div>
              <div class="treeBox treeBox3">
                <el-tree
                  ref="tree3"
                  :data="tree3"
                  :default-checked-keys="checkedDsScope"
                  show-checkbox
                  node-key="taskTypeId"
                  :props="defaultProps"
                >
                </el-tree>
                <el-tree
                  ref="tree7"
                  :data="tree7"
                  :default-checked-keys="checkedDsScope"
                  show-checkbox
                  node-key="taskTypeId"
                  :props="defaultProps"
                >
                </el-tree>
              </div>
            </div>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="描述">
            <el-input
              type="textarea"
              resize="none"
              v-model="distributionForm.description"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import {
  tree1,
  tree2,
  tree3,
  tree4,
  tree5,
  tree7
} from "@/const/crud/taskTypeTree/index";
import { getBigPackageDetailApi } from "@/api/csmpages/index.js";
export default {
  props: ["dialogShow"],
  data() {
    return {
      tree1,
      tree2,
      tree3,
      tree7,
      checkedDsScope: [],
      defaultProps: {
        children: "children",
        label: "taskTypeName",
        disabled: true
      },
      distributionForm: {}
    };
  },
  computed: {
    visible: {
      get() {
        return this.dialogShow;
      },
      set(value) {
        this.$emit("update:dialogShow", false);
      }
    }
  },
  methods: {
    async lookDetail(id) {
      this.distributionForm = {};
      this.checkedDsScope = [];
      const res = await getBigPackageDetailApi({ id });
      if (
        res.data.data.drugtableName &&
        Array.isArray(res.data.data.drugtableName)
      ) {
        res.data.data.drugtableName = res.data.data.drugtableName.join("，");
      }
      if (res.data.data.quizNames && Array.isArray(res.data.data.quizNames)) {
        res.data.data.quizNames = res.data.data.quizNames.join("，");
      }
      this.distributionForm = res.data.data;
      this.checkedDsScope = res.data.data.taskTypeSet;
    }
  }
};
</script>

<style lang="scss" scoped>
.treeBox {
  float: left;
  width: 25%;
}
.treeBox3 {
  width: 50%;
}

.treeBox::-webkit-scrollbar {
  width: 10px;
}

.treeBox::-webkit-scrollbar-thumb {
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  background-color: #f90;
}

.treeBox::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.1);
}
</style>
