<template>
  <div class="body-main">
    <div
      class="body-row-node"
      v-for="(node, index) in data"
      :key="'node' + node.level + index"
    >
      <div class="body-row">
        <template v-for="(item, cindex) in columns">
          <div class="body-item" :key="'item' + index + cindex">
            <div class="item-div" v-if="item.prop == 'ex_status'">
              <el-tag
                :size="tablebtnSize"
                v-if="node.ex_status + '' === '0'"
                :class="{
                  'hover-tag':
                    node.status + '' === '0' && powers.some((itemsome) => itemsome == '010'),
                }"
                :type="'warning'"
                @click="
                  openModal(
                    node.id,
                    false,
                    true,
                    node.status + '' === '0' && powers.some((itemsome) => itemsome == '010')
                  )
                "
              >
                <i
                  class="el-icon-thumb"
                  v-if="
                    node.status + '' === '0' && powers.some((itemsome) => itemsome == '010')
                  "
                  style="margin-right: 1px"
                ></i>
                {{ node.ex_status_cn }}
              </el-tag>
              <el-tag
                :size="tablebtnSize"
                v-else-if="node.ex_status + '' === '1'"
                :type="'success'"
              >
                {{ node.ex_status_cn }}
              </el-tag>
              <el-tag
                :size="tablebtnSize"
                v-else-if="node.ex_status + '' === '2'"
                :class="{
                  'hover-tag':
                    node.status + '' === '0' && powers.some((itemsome) => itemsome == '009'),
                }"
                :type="'danger'"
                @click="
                  again(
                    node.id,
                    node.status + '' === '0' && powers.some((itemsome) => itemsome == '009')
                  )
                "
              >
                <i
                  class="el-icon-thumb"
                  v-if="
                    node.status + '' === '0' && powers.some((itemsome) => itemsome == '009')
                  "
                  style="margin-right: 1px"
                ></i>
                {{ node.ex_status_cn }}
              </el-tag>
              <el-tag
                :size="tablebtnSize"
                v-else-if="node.ex_status + '' === '3'"
                :class="{
                  'hover-tag':
                    node.status + '' === '0' && powers.some((itemsome) => itemsome == '009'),
                }"
                :type="'info'"
                @click="
                  again(
                    node.id,
                    node.status + '' === '0' && powers.some((itemsome) => itemsome == '009')
                  )
                "
              >
                <i
                  class="el-icon-thumb"
                  v-if="
                    node.status + '' === '0' && powers.some((itemsome) => itemsome == '009')
                  "
                  style="margin-right: 1px"
                ></i>
                {{ node.ex_status_cn }}
              </el-tag>
            </div>
            <div class="item-div" v-else-if="item.prop == 'status'">
              <span class="item-div-item">
                <el-tag
                  v-if="node[item.prop] + '' === '1'"
                  type="success"
                  :class="{ 'hover-tag': powers.some((i) => i == '004') }"
                  :size="tablebtnSize"
                  @click="
                    statusConfirm(
                      node.id,
                      node.status,
                      node.ex_status,
                      powers.some((itemsome) => itemsome == '004')
                    )
                  "
                >
                  <i
                    class="el-icon-thumb"
                    v-if="powers.some((itemsome) => itemsome == '004')"
                    style="margin-right: 1px"
                  ></i>
                  启用</el-tag
                >
                <el-tag
                  v-else
                  :class="{ 'hover-tag': powers.some((i) => i == '004') }"
                  :size="tablebtnSize"
                  type="warning"
                  @click="
                    statusConfirm(
                      node.id,
                      node.status,
                      node.ex_status,
                      powers.some((itemsome) => itemsome == '004')
                    )
                  "
                >
                  <i
                    class="el-icon-thumb"
                    v-if="powers.some((itemsome) => itemsome == '004')"
                    style="margin-right: 1px"
                  ></i>
                  禁用</el-tag
                >
              </span>
            </div>
            <div class="item-div" v-else-if="item.prop == 'desc'">
              <span class="item-div-item">
                <el-link
                  class="mini-link"
                  v-if="
                    (node.status + '' === '0' &&
                      node.ex_status + '' === '3' &&
                      powers.some((itemsome) => itemsome == '005')) ||
                    (node.status + '' === '0' &&
                      node.ex_status + '' === '2' &&
                      powers.some((itemsome) => itemsome == '005'))
                  "
                  type="primary"
                  :underline="false"
                  :size="tablebtnSize"
                  @click="openModal(node.id, false, false)"
                >
                  修改
                </el-link>
                <el-link
                  v-if="powers.some((itemsome) => itemsome == '007')"
                  class="mini-link"
                  type="primary"
                  :underline="false"
                  :size="tablebtnSize"
                  @click="openModal(node.id, true, false)"
                >
                  详情
                </el-link>

                <el-link
                  v-if="node.rateEdit && powers.some((itemsome) => itemsome == '017')"
                  class="mini-link"
                  type="primary"
                  :underline="false"
                  :size="tablebtnSize"
                  @click="setNewProfit(node)"
                >
                  提交新毛利
                </el-link>
              </span>
            </div>
            <div
              class="item-div item-input"
              v-else-if="node.rateEdit === true && item.prop == 'in_rate' && item.show"
            >
              <el-input-number
                style="width: 100%"
                v-model="node.in_rate_new"
                :step="0.01"
                :min="0"
                :max="100"
                :precision="2"
                :placeholder="node.in_rate"
                step-strictly
                :controls="false"
              ></el-input-number>
            </div>
            <div
              class="item-div item-input"
              v-else-if="node.rateEdit === true && item.prop == 'low_rate' && item.show"
            >
              <el-input-number
                style="width: 100%"
                v-model="node.low_rate_new"
                :step="0.01"
                :min="0"
                :max="100"
                :precision="2"
                :placeholder="node.low_rate"
                step-strictly
                :controls="false"
              ></el-input-number>
            </div>
            <div
              class="item-div item-input"
              v-else-if="node.rateEdit === true && item.prop == 'out_rate' && item.show"
            >
              <el-input-number
                style="width: 100%"
                v-model="node.out_rate_new"
                :step="0.01"
                :min="0"
                :max="100"
                :precision="2"
                :placeholder="node.out_rate"
                step-strictly
                :controls="false"
              ></el-input-number>
            </div>
            <div
              class="item-div item-input"
              v-else-if="node.rateEdit === true && item.prop == 'rate' && item.show"
            >
              <el-input-number
                style="width: 100%"
                v-model="node.rate_new"
                :step="0.01"
                :min="0"
                :max="100"
                :precision="2"
                :placeholder="node.rate"
                step-strictly
                :controls="false"
              ></el-input-number>
            </div>
            <div class="item-div" v-else>
              <span
                :class="{
                  pad2: node.level === 2 && cindex === 0,
                  pad3: node.level === 3 && cindex === 0,
                }"
                class="item-div-item"
              >
                <i
                  style="color: rgb(102, 102, 102)"
                  class="hasHover"
                  @click="openI(node.open, node.cat_pid, node.id)"
                  :class="{
                    'el-icon-arrow-right': !node['open'],
                    'el-icon-arrow-down': node['open'],
                  }"
                  v-if="cindex === 0 && node.children && node.children.length > 0"
                ></i>
                {{ node[item.prop] }}</span
              >
            </div>
          </div>
        </template>
      </div>
      <treeRob
        :data="node.children"
        v-if="node.children && node.children.length > 0 && node.open"
        :columns="columns"
        @again="again"
        @statusConfirm="statusConfirm"
        @openModal="openModal"
        @setNewProfit="setNewProfit"
      ></treeRob>
    </div>
  </div>
</template>

<script>
import treeRob from "./tree-row.vue";
import { mapGetters } from "vuex";
export default {
  name: "treeRob",
  components: {
    treeRob,
  },
  computed: {
    ...mapGetters(["tablebtnSize", "searchSize", "size"]),
    powers() {
      const tran = this.$store.getters.btnList.find((i) => i.menu_route == "sort") || {};
      const { action } = tran ?? {};
      return action ?? [];
    },
  },
  props: {
    // el-table 表格数据 对应data字段
    data: {
      type: Array,
      default: () => [],
    },
    /**
     * el-table-column 表格列属性集合
     * 自定义属性：
     */
    columns: {
      type: Array,
      default: () => [],
    },
  },
  methods: {
    openI(open, pid, id) {
      if (open === false || open === true) {
        this.data.map((v1) => {
          if (v1.id === id) {
            v1.open = !open;
          }
          return v1;
        });
      }
    },
    again(id, type) {
      if (!type) {
        return;
      }
      this.$emit("again", id);
    },
    wealWithItem(item, pop) {
      let value = "";
      let old = parseFloat(item[`${pop}`] + "");
      let newi = parseFloat(item[`${pop}_new`] + "");
      if (old !== newi) {
        value = newi;
      }
      return value;
    },
    setNewProfit(node) {
      let edit = false;
      let model = {
        id: node.id,
        in_rate: this.wealWithItem(node, "in_rate"),
        out_rate: this.wealWithItem(node, "out_rate"),
        low_rate: this.wealWithItem(node, "low_rate"),
        rate: this.wealWithItem(node, "rate"),
      };
      if (
        model.in_rate === "" &&
        model.out_rate === "" &&
        model.low_rate === "" &&
        model.rate === ""
      ) {
        edit = true;
      }
      if (edit) {
        this.$message.warning("您未修改毛利！");
      } else {
        this.$emit("setNewProfit", model);
      }
    },
    statusConfirm(id, status, ex, type) {
      if (!type) {
        return;
      }
      this.$emit("statusConfirm", id, status, ex);
    },
    openModal(id, is, app, type) {
      if (!type) {
        return;
      }
      this.$emit("openModal", id, is, app);
    },
  },
};
</script>

<style lang="scss" scoped>
.body-main {
  width: 100%;
  position: relative;
  .body-row-node {
    width: 100%;
    position: relative;
    .body-row {
      width: 100%;
      display: flex;
      height: 42px;
      .body-item {
        background: #fff;
        display: inline-block;
        flex: 1;
        text-align: center;
        border-right: 1px solid #dfe6ec;
        border-bottom: 1px solid #dfe6ec;
        &:first-child {
          text-align: left;
        }
        .item-div {
          padding: 8px 0;
          &.item-input {
            padding: 0;
          }

          span.item-div-item {
            text-overflow: ellipsis;
            white-space: normal;
            word-break: break-all;
            line-height: 23px;
            height: 23px;
            overflow: hidden;
            padding: 0;
            margin: 0;
            list-style: none;
            font-style: normal;
            text-decoration: none;
            text-indent: initial;
            border-spacing: 2px;
            font-size: 12px;
            border: none;
            font-weight: 500;
            font-family: "Microsoft Yahei", sans-serif;
            -webkit-tap-highlight-color: transparent;
            -webkit-font-smoothing: antialiased;
            display: inline-block;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            position: relative;
            vertical-align: middle;
            padding-left: 10px;
            padding-right: 10px;
            width: 100%;
            color: #606266;
            &.open-i {
              &:hover {
                cursor: pointer;
              }
            }
            &.pad2 {
              padding-left: 30px;
            }
            &.pad3 {
              padding-left: 50px;
            }
          }
        }
      }
      &:hover {
        .body-item {
          background: #f5f7fa;
        }
      }
    }

    // flex:1
    //  display: flex;
  }
}
</style>
