<template>
  <div class="create-flow-container">
    <div class="create-flow-card" v-for="(cate, i1) in cates" :key="cate.id">
      <div class="create-flow-card__header">
        <div class="create-flow-card__header--icon">
          <svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="26" height="26"><path d="M885.4 665.6H624.3c-16.7 0-31.8 10.3-37.5 26-10.7 29.7-39.1 51-72.5 51s-61.8-21.3-72.5-51c-5.6-15.7-20.8-26-37.5-26h-267c-22.1 0-40 17.9-40 40v211.3c0 22.1 17.9 40 40 40h748.1c22.1 0 40-17.9 40-40V705.6c0-22.1-17.9-40-40-40zM139.3 623.6V166.8c0-22.1 17.9-40 40-40h88v496.8h-128z" fill="#ffffff"></path><path d="M844.2 65.5H350.3c-22.1 0-40 17.9-40 40v518.6h110.3c19.3 0 51.9 25.5 61.8 52.9 4.8 13.5 17.7 22.5 32 22.5s27.2-9 32-22.5c11.7-32.6 43-54.5 77.9-54.5h251.1c3 0 5.9 0.2 8.8 0.5V105.5c0-22.1-17.9-40-40-40zM663.6 444.6c0 11.9-9.6 21.5-21.5 21.5H429c-11.9 0-21.5-9.6-21.5-21.5s9.6-21.5 21.5-21.5h213c12 0 21.6 9.7 21.6 21.5z m0-110.6c0 11.9-9.6 21.5-21.5 21.5H429c-11.9 0-21.5-9.6-21.5-21.5s9.6-21.5 21.5-21.5h213c12 0 21.6 9.6 21.6 21.5z m0-110.7c0 11.9-9.6 21.5-21.5 21.5H429c-11.9 0-21.5-9.6-21.5-21.5s9.6-21.5 21.5-21.5h213c12 0 21.6 9.7 21.6 21.5z" fill="#ffffff"></path></svg>
        </div>
        <div class="create-flow-card__header--text">
          {{ cate.name }}
        </div>
      </div>

      <div class="create-flow-card__body">
        <template v-for="(flow,i2) in cate.customer_models">
          <template v-if="flow.flow_lock_remark">
            <el-tooltip effect="dark" :content="flow.flow_lock_remark" placement="top">
              <div class="create-flow-card__body-item" style="cursor: not-allowed;">
                <div class="create-flow-card__body-item-left">
                  <svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16">
                    <path d="M993.371558 489.73913c-19.080745-19.080745-44.521739-25.440994-69.962733-25.440993-25.440994 0-50.881988 12.720497-69.962733 31.801242l-356.173913 356.173913c-6.360248 6.360248-6.360248 12.720497-12.720497 19.080745 0 0 0 6.360248-6.360248 12.720497l-19.080746 69.962733c0 19.080745 0 31.801242 12.720497 50.881988 12.720497 12.720497 31.801242 19.080745 44.521739 19.080745h6.360249l76.322981-19.080745c6.360248 0 25.440994-6.360248 31.801242-12.720497l356.173913-356.173913c38.161491-44.521739 38.161491-108.124224 6.360249-146.285715z m-394.335404 451.57764l-63.602484 12.720497 12.720496-69.962733 292.571429-292.571428 50.881988 57.242236-292.571429 292.571428z m349.813665-349.813664l-12.720497 12.720496-50.881988-50.881987 12.720497-12.720497c6.360248-6.360248 12.720497-12.720497 25.440994-12.720497s25.440994 0 31.801242 6.360249c6.360248 6.360248 6.360248 12.720497 6.360249 25.440993s-6.360248 25.440994-12.720497 31.801243zM344.626216 941.31677h-228.968944c-19.080745 0-44.521739-19.080745-44.521739-44.521739v-788.670807c0-19.080745 19.080745-44.521739 44.521739-44.52174h750.509317c19.080745 0 44.521739 19.080745 44.521739 44.52174v133.565217c0 12.720497 12.720497 25.440994 31.801242 25.440994s31.801242-12.720497 31.801242-25.440994v-133.565217c0-63.602484-50.881988-108.124224-108.124223-108.124224h-750.509317c-57.242236 0-108.124224 44.521739-108.124224 101.763975V890.434783c0 57.242236 44.521739 101.763975 108.124224 101.763975h228.968944c19.080745 0 31.801242-12.720497 31.801242-31.801242 6.360248-19.080745-19.080745-19.080745-31.801242-19.080746z" fill="#bdbdbd"></path>
                    <path d="M815.284601 190.807453c-6.360248-6.360248-12.720497-6.360248-25.440994-6.360248h-578.782608c-19.080745 0-31.801242 6.360248-31.801242 31.801242s12.720497 31.801242 31.801242 31.801242h578.782608c19.080745 0 31.801242-12.720497 31.801243-31.801242 0-12.720497 0-25.440994-6.360249-25.440994zM211.060999 591.503106c-19.080745 0-31.801242 6.360248-31.801242 31.801242s12.720497 31.801242 31.801242 31.801242h337.093167c19.080745 0 31.801242-12.720497 31.801243-31.801242s-12.720497-31.801242-31.801243-31.801242h-337.093167zM815.284601 400.695652c0-19.080745-6.360248-31.801242-31.801242-31.801242h-572.42236c-19.080745 0-31.801242 12.720497-31.801242 31.801242s12.720497 31.801242 31.801242 31.801242h578.782608c12.720497 0 25.440994-19.080745 25.440994-31.801242zM942.48957 286.21118c-19.080745 0-31.801242 12.720497-31.801242 25.440994v25.440994c0 12.720497 12.720497 25.440994 31.801242 25.440993s31.801242-12.720497 31.801242-25.440993v-25.440994c0-12.720497-19.080745-25.440994-31.801242-25.440994z" fill="#bdbdbd"></path>
                  </svg>
                </div>

                <div class="create-flow-card__body-item-right">
                  <div class="create-flow-card__body-item-right--title" style="color: #bdbdbd;">{{ flow.name }}</div>

                  <div class="create-flow-card__body-item-right--value">
                    <div class="done">
                      <span :style="{ color: flow.my_apply_total===0 ? '#bfc0c1' : '#0279fd' }">{{ flow.my_apply_total }}</span>
                      <span>已申请</span>
                    </div>
                    <div class="todo">
                      <span :style="{ color: flow.my_wait_total===0 ? '#bfc0c1' : '#0279fd' }">{{ flow.my_wait_total }}</span>
                      <span>待办</span>
                    </div>
                  </div>
                </div>
              </div>
            </el-tooltip>
          </template>
          <template v-else>
            <div class="create-flow-card__body-item" @click="toCreate(flow,cate)">
              <div class="create-flow-card__body-item-left">
                <svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16"><path d="M993.371558 489.73913c-19.080745-19.080745-44.521739-25.440994-69.962733-25.440993-25.440994 0-50.881988 12.720497-69.962733 31.801242l-356.173913 356.173913c-6.360248 6.360248-6.360248 12.720497-12.720497 19.080745 0 0 0 6.360248-6.360248 12.720497l-19.080746 69.962733c0 19.080745 0 31.801242 12.720497 50.881988 12.720497 12.720497 31.801242 19.080745 44.521739 19.080745h6.360249l76.322981-19.080745c6.360248 0 25.440994-6.360248 31.801242-12.720497l356.173913-356.173913c38.161491-44.521739 38.161491-108.124224 6.360249-146.285715z m-394.335404 451.57764l-63.602484 12.720497 12.720496-69.962733 292.571429-292.571428 50.881988 57.242236-292.571429 292.571428z m349.813665-349.813664l-12.720497 12.720496-50.881988-50.881987 12.720497-12.720497c6.360248-6.360248 12.720497-12.720497 25.440994-12.720497s25.440994 0 31.801242 6.360249c6.360248 6.360248 6.360248 12.720497 6.360249 25.440993s-6.360248 25.440994-12.720497 31.801243zM344.626216 941.31677h-228.968944c-19.080745 0-44.521739-19.080745-44.521739-44.521739v-788.670807c0-19.080745 19.080745-44.521739 44.521739-44.52174h750.509317c19.080745 0 44.521739 19.080745 44.521739 44.52174v133.565217c0 12.720497 12.720497 25.440994 31.801242 25.440994s31.801242-12.720497 31.801242-25.440994v-133.565217c0-63.602484-50.881988-108.124224-108.124223-108.124224h-750.509317c-57.242236 0-108.124224 44.521739-108.124224 101.763975V890.434783c0 57.242236 44.521739 101.763975 108.124224 101.763975h228.968944c19.080745 0 31.801242-12.720497 31.801242-31.801242 6.360248-19.080745-19.080745-19.080745-31.801242-19.080746z" fill="#535353"></path><path d="M815.284601 190.807453c-6.360248-6.360248-12.720497-6.360248-25.440994-6.360248h-578.782608c-19.080745 0-31.801242 6.360248-31.801242 31.801242s12.720497 31.801242 31.801242 31.801242h578.782608c19.080745 0 31.801242-12.720497 31.801243-31.801242 0-12.720497 0-25.440994-6.360249-25.440994zM211.060999 591.503106c-19.080745 0-31.801242 6.360248-31.801242 31.801242s12.720497 31.801242 31.801242 31.801242h337.093167c19.080745 0 31.801242-12.720497 31.801243-31.801242s-12.720497-31.801242-31.801243-31.801242h-337.093167zM815.284601 400.695652c0-19.080745-6.360248-31.801242-31.801242-31.801242h-572.42236c-19.080745 0-31.801242 12.720497-31.801242 31.801242s12.720497 31.801242 31.801242 31.801242h578.782608c12.720497 0 25.440994-19.080745 25.440994-31.801242zM942.48957 286.21118c-19.080745 0-31.801242 12.720497-31.801242 25.440994v25.440994c0 12.720497 12.720497 25.440994 31.801242 25.440993s31.801242-12.720497 31.801242-25.440993v-25.440994c0-12.720497-19.080745-25.440994-31.801242-25.440994z" fill="#535353"></path></svg>
              </div>

              <div class="create-flow-card__body-item-right">
                <div class="create-flow-card__body-item-right--title">{{ flow.name }}</div>

                <div class="create-flow-card__body-item-right--value">
                  <div class="done" @click.stop="toMy">
                    <span :style="{ color: flow.my_apply_total===0 ? '#bfc0c1' : '#0279fd' }">{{ flow.my_apply_total }}</span>
                    <span>已申请</span>
                  </div>
                  <div class="todo" @click.stop="toTodo">
                    <span :style="{ color: flow.my_wait_total===0 ? '#bfc0c1' : '#0279fd' }">{{ flow.my_wait_total }}</span>
                    <span>待办</span>
                  </div>
                </div>
              </div>
            </div>
          </template>
        </template>
      </div>
    </div>
  </div>
</template>

<script>
import { flow } from "@/api/flow"
export default {
  data() {
    return {
      cates: []
    }
  },
  methods: {
    async getFlow() {
      try {
        const res = await flow(true)
        this.cates = res.cates || [];
        console.log(res)
      } catch (err) {
        console.error(err)
      }
    },

    toCreate(flow,cate) {
      if(flow.url) {
        window.open(flow.url,'_blank')
      } else {
        this.$router.push({
          path: '/flow/create',
          query: {
            module_id: flow.id
          }
        })
      }
    },
    toMy() {
      this.$router.push('/flow/list/my')
    },
    toTodo() {
      this.$router.push('/flow/list/todo')
    },
  },
  computed: {},
  created() {
    this.getFlow()
  }
}
</script>

<style scoped lang="scss">
.create-flow-container {
  column-count: 2;
  column-gap: 10px;
  padding: 20px;
}

.create-flow-container .create-flow-card {
  border-radius: 10px;
  filter: drop-shadow(0.5px 0.866px 14.5px rgba(59,66,82,0.11));
  background-color: #ffffff;
  break-inside: avoid;
  grid-row-start: auto;
}
.create-flow-card + .create-flow-card {
  margin-top: 10px;
}
.create-flow-card__header {
  display: flex;
  align-items: center;
  padding: 16px 0 16px 16px;
}
.create-flow-card:nth-child(5n+1) .create-flow-card__header--icon {
  filter: drop-shadow(0 0 5px rgba(254,102,94,0.35));
  background-image: linear-gradient(90deg, #ffa175 0%, #fd635d 99%, #fd635d 100%);
}
.create-flow-card:nth-child(5n+2) .create-flow-card__header--icon {
  filter: drop-shadow(0px 6px 6px rgba(43,188,255,0.5));
  background-color: #0279fd;
}
.create-flow-card:nth-child(5n+3) .create-flow-card__header--icon {
  filter: drop-shadow(1.462px 4.782px 10px rgba(11,196,208,0.35));
  background-image: linear-gradient(90deg, #4bcbf1 0%, #3ba7ef 99%, #3ba7ef 100%);
}
.create-flow-card:nth-child(5n+4) .create-flow-card__header--icon {
  filter: drop-shadow(1.462px 4.782px 10px rgba(255,159,60,0.35));
  background-image: linear-gradient(90deg, #ffb737 0%, #ff9f3b 100%);
}
.create-flow-card:nth-child(5n) .create-flow-card__header--icon {
  filter: drop-shadow(1.462px 4.782px 10px rgba(195,89,251,0.35));
  background-image: linear-gradient(90deg, #d38ff3 0%, #c359fb 99%, #c359fb 100%);
}
.create-flow-card__header--icon {
  flex-shrink: 0;
  width: 50px;
  height: 50px;
  border-radius: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.create-flow-card__header--text {
  flex: 1;
  font-size: 18px;
  letter-spacing: 1px;
  color: #3b4252;
  white-space: nowrap;
  margin-left: 15px;
  padding-bottom: 8px;
  position: relative;
  overflow: hidden;
  text-overflow: ellipsis;
}
.create-flow-card:nth-child(5n+1) .create-flow-card__header--text::after {
  content: "";
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, #ffa175 0%, #fd635d 34%, #fd635d 37%,#dbdbdd 37%,#dbdbdd 100%);
  position: absolute;
  bottom: 0;
  right: 0;
}
.create-flow-card:nth-child(5n+2) .create-flow-card__header--text::after {
  content: "";
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, #0279fd 0%, #0279fd 37%,#dbdbdd 37%,#dbdbdd 100%);
  position: absolute;
  bottom: 0;
  right: 0;
}
.create-flow-card:nth-child(5n+3) .create-flow-card__header--text::after {
  content: "";
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, #4bcbf1 0%, #3ba7ef 34%,#3ba7ef 37%,#dbdbdd 37%,#dbdbdd 100%);
  position: absolute;
  bottom: 0;
  right: 0;
}
.create-flow-card:nth-child(5n+4) .create-flow-card__header--text::after {
  content: "";
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, #ffb737 0%, #ff9f3b 34%,#ff9f3b 37%,#dbdbdd 37%,#dbdbdd 100%);
  position: absolute;
  bottom: 0;
  right: 0;
}
.create-flow-card:nth-child(5n) .create-flow-card__header--text::after {
  content: "";
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, #d38ff3 0%, #c359fb 34%,#c359fb 37%,#dbdbdd 37%,#dbdbdd 100%);
  position: absolute;
  bottom: 0;
  right: 0;
}
.create-flow-card__body {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 10px;
  padding: 0 16px 20px 16px;
}
.create-flow-card__body-item {
  border-radius: 10px;
  background-color: #f5f7fa;
  border: 1px solid rgba(227,234,240,0.5);
  padding: 10px;
  display: flex;
  align-items: center;
}
.create-flow-card__body-item-left {
  background: #fff;
  border-radius: 100%;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 12px;
  cursor: pointer;
}
.create-flow-card__body-item-right {
  flex: 1;
}
.create-flow-card__body-item-right--title {
  color: #000000;
}
.create-flow-card__body-item-right--value {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 18px;
  position: relative;
}
.create-flow-card__body-item-right--value:has(.todo)::after {
  content: "";
  width: 1px;
  background: #ededee;
  left: calc(50%);
  position: absolute;
  top: 10%;
  bottom: 10%;
}
.create-flow-card__body-item-right--value .done,.create-flow-card__body-item-right--value .todo {
  flex-basis: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  cursor: pointer;
}
.create-flow-card__body-item-right--value .done > span:nth-child(1),.create-flow-card__body-item-right--value .todo > span:nth-child(1) {
  font-size: 14px;
  font-weight: 600;
}
.create-flow-card__body-item-right--value .done > span:nth-child(2),.create-flow-card__body-item-right--value .todo > span:nth-child(2) {
  font-size: 11px;
  color: #999999;
  word-break: keep-all;
}

@media (max-width: 992px) {
  .create-flow-container {
    display: flex;
    flex-direction: column;
  }
  .create-flow-card__body {
    grid-template-columns: repeat(2, 1fr);
  }
  .create-flow-card__header--icon {
    width: 40px;
    height: 40px;
  }
  .create-flow-card__header--text {
    font-size: 16px;
  }
  .create-flow-card__body-item-right--title {
    font-size: 14px;
  }
  .create-flow-card__body-item-left {
    margin-right: 6px;
  }
  .create-flow-card__body-item-left {
    width: 30px;
    height: 30px;
  }
  .create-flow-card__body-item {
    padding: 10px 8px;
  }
}
</style>
