<template>
  <div :style="_style">
    <el-popover
      placement="right"
      width="400"
      trigger="click"
      :disabled="!edit"
    >
      <el-form label-position="left" label-width="100px" style="padding:20px 10px 0 10px">
        <el-form-item label="圆角">
          <el-slider
            v-model="item.css.borderRadius"
            show-input
            :min="0"
            :max="60"
          />
        </el-form-item>
        <el-form-item label="边框颜色">
          <el-color-picker v-model="item.css.borderColor" />
        </el-form-item>
        <el-form-item label="边框大小">
          <el-slider
            v-model="item.css.borderWidth"
            show-input
            :min="0"
            :max="20"
          />
        </el-form-item>
      </el-form>
      <div slot="reference">
        <svg class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="26699" width="100%"><path d="M0 0m113.777778 0l796.444444 0q113.777778 0 113.777778 113.777778l0 796.444444q0 113.777778-113.777778 113.777778l-796.444444 0q-113.777778 0-113.777778-113.777778l0-796.444444q0-113.777778 113.777778-113.777778Z" fill="#D1C3A8" p-id="26700" /><path d="M602.605037 619.861333s5.461333-46.26963 6.788741-49.607111c-2.23763 1.592889-8.457481 4.93037-10.619259 6.637037-13.691259 10.960593-49.872593 14.753185-86.774519 13.767111-36.901926 0.83437-73.083259-2.88237-86.774519-13.767111-2.161778-1.706667-8.38163-5.044148-10.619259-6.637037 1.327407 3.337481 6.826667 49.645037 6.788741 49.607111 1.327407 84.726519-14.108444 96.862815-21.807407 124.738371 24.538074 44.069926 60.150519 86.888296 84.688592 130.958222 5.30963 9.519407 16.801185 11.719111 24.310519 18.62163v3.792592l2.654814 1.289482 0.796445-1.251556 0.796444 1.251556 2.654815-1.289482v-3.792592c7.585185-6.902519 18.962963-9.102222 24.310519-18.62163 24.538074-44.069926 60.150519-86.888296 84.688592-130.958222-7.774815-27.799704-23.210667-40.011852-21.883259-124.738371z" fill="#FED0B9" p-id="26701" /><path d="M681.908148 428.335407c-11.681185 5.726815-18.090667 10.353778-23.210667 22.376297 14.677333-64.853333 9.253926-136.950519-48.052148-169.642667-60.150519-34.133333-159.895704-33.033481-211.702518 12.932741-34.133333 30.340741-59.998815 91.591111-35.00563 156.709926-5.650963-11.377778-10.277926-23.172741-23.058963-22.376297-40.429037 2.503111-31.326815 51.693037-21.731555 70.162963s27.951407 32.805926 48.583111 33.678223a11.757037 11.757037 0 0 1 7.130074 1.706666 9.860741 9.860741 0 0 1 2.654815 4.702815c10.733037 32.616296 20.707556 59.847111 48.583111 82.337185s65.156741 37.394963 101.906963 31.288889c43.463111-7.205926 87.722667-34.853926 103.348148-77.748148 4.816593-13.274074 3.299556-32.730074 17.559704-40.315259a24.272593 24.272593 0 0 1 8.229926-2.010074c21.200593-3.299556 37.925926-18.773333 47.179851-37.546667a80.971852 80.971852 0 0 0 8.685037-42.666667c-1.592889-17.521778-19.607704-29.240889-31.099259-23.589926z" fill="#FEE1D2" p-id="26702" /><path d="M676.750222 257.21363C659.607704 209.351111 569.53363 182.044444 505.438815 185.837037c-59.885037 3.337481-140.325926 25.486222-157.923556 71.49037-16.118519 42.287407-22.148741 141.274074-5.082074 171.008 0 0 19.418074 11.605333 22.565926 28.065186 0 0 16.763259-66.977185 16.763259-67.015112 10.164148-46.117926 29.544296-74.865778 71.224889-76.8 32.919704-1.517037 52.148148 18.24237 59.126519 18.204445s26.244741-19.721481 59.126518-18.204445c41.718519 1.934222 61.098667 30.682074 71.224889 76.8l16.801185 67.015112c3.109926-16.459852 22.565926-28.065185 22.565926-28.065186 17.066667-29.733926 10.202074-128.720593-5.082074-171.121777z" fill="#DB5050" p-id="26703" /><path d="M628.318815 697.040593C621.985185 721.616593 570.936889 773.688889 513.517037 773.688889s-116.205037-51.920593-117.835852-76.496593C259.982222 716.8 153.144889 816.165926 153.144889 935.708444V1024h717.710222s2.427259-41.301333 0-107.254519c-4.437333-119.466667-106.837333-199.945481-242.536296-219.704888z" fill="#88D1BE" p-id="26704" /><path d="M513.517037 773.688889s70.238815-63.601778 119.845926-80.782222c0 0 87.22963 18.62163 81.08563 33.298963-84.650667 51.958519-168.315259 93.487407-181.248 111.957333a2.920296 2.920296 0 0 1-5.271704-1.061926zM513.517037 773.688889s-70.200889-63.450074-119.694222-80.630519c0 0-87.22963 18.62163-81.08563 33.298963 84.536889 51.958519 168.315259 93.487407 181.134222 112.033186a2.958222 2.958222 0 0 0 5.271704-1.061926z" fill="#FFFFFF" p-id="26705" /></svg>
        <!--        <svg class="icon" width="100%" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="26266"><path d="M0 0m113.777778 0l796.444444 0q113.777778 0 113.777778 113.777778l0 796.444444q0 113.777778-113.777778 113.777778l-796.444444 0q-113.777778 0-113.777778-113.777778l0-796.444444q0-113.777778 113.777778-113.777778Z" fill="#86A3C4" p-id="26267" /><path d="M616.106667 683.766519c-1.517037-2.465185-3.792593-5.271704-7.395556-12.060445-9.557333-17.332148-17.256296-82.337185-10.126222-107.785481 2.389333-8.533333 6.750815-22.452148 2.465185-29.999408-8.00237-13.956741-20.48-27.45837-34.133333-32.919704-20.024889-7.964444-33.147259-7.964444-54.916741-5.575111-21.655704-2.578963-34.816-2.427259-54.802963 5.575111-13.653333 5.461333-26.130963 18.962963-34.133333 32.919704-4.323556 7.585185 0 21.466074 2.427259 29.999408 7.168 25.448296-0.568889 90.453333-10.126222 107.785481-4.247704 7.585185-6.409481 10.315852-8.002371 13.084445 0 0-155.723852 175.066074-174.459259 335.568592h558.155852s-91.287704-222.435556-174.952296-336.592592z" fill="#FECDB4" p-id="26268" /><path d="M676.143407 409.6c-13.387852-0.796444-18.24237 16.57363-24.158814 28.065185 26.168889-65.080889-0.910222-132.058074-36.598519-162.360889-27.534222-23.36237-67.963259-35.195259-109.340444-36.67437-41.415111 1.479111-81.844148 13.312-109.378371 36.67437-35.688296 30.340741-62.767407 97.28-36.598518 162.360889-5.916444-11.377778-10.770963-28.86163-24.158815-28.065185-42.287407 2.541037-32.768 51.730963-22.755556 70.200889s29.240889 32.805926 50.820741 33.678222a12.667259 12.667259 0 0 1 7.585185 1.668741 9.860741 9.860741 0 0 1 2.768593 4.740741c11.377778 32.57837 20.935111 60.340148 48.848592 84.233481 23.589926 20.176593 55.864889 35.309037 82.944 29.392593 27.041185 5.916444 59.316148-9.216 82.906075-29.392593 27.913481-23.893333 37.622519-51.655111 48.848592-84.233481a9.936593 9.936593 0 0 1 2.806519-4.740741 12.553481 12.553481 0 0 1 7.585185-1.668741c21.579852-0.872296 40.846222-15.397926 50.820741-33.678222s19.380148-67.621926-22.945186-70.200889z" fill="#FEE1D2" p-id="26269" /><path d="M337.313185 703.032889L305.872593 1024h351.307851l8.647112-313.647407-162.550519 5.916444-165.963852-13.236148z" fill="#E2E6E6" p-id="26270" /><path d="M360.068741 437.703111s-5.992296-56.888889 10.846815-77.899852c0 0-8.950519-41.453037 38.381037-67.470222S572.681481 259.185778 612.882963 304.165926s21.31437 63.905185 21.31437 63.905185 23.021037 52.603259 17.78726 69.632c0 0 10.012444-25.713778 24.158814-28.065185 0 0 8.988444-78.734222-5.688888-128.606815 0 0 18.583704-33.526519 15.625481-54.08237S581.897481 98.986667 450.484148 132.740741C362.951111 155.154963 355.214222 190.27437 322.56 233.699556c-30.037333 39.898074 7.585185 85.485037 7.585185 85.485037s-3.792593 67.849481 11.377778 92.197926a94.587259 94.587259 0 0 1 18.545778 26.320592z" fill="#423B38" p-id="26271" /><path d="M562.441481 1024c-10.277926-83.437037-30.340741-255.469037-30.34074-255.469037l-39.063704 6.106074c0 2.768593-18.052741 167.822222-26.965333 249.362963z" fill="#373952" p-id="26272" /><path d="M529.294222 789.352296h-30.151111a18.014815 18.014815 0 0 1-17.408-13.312l-9.178074-33.829926a18.014815 18.014815 0 0 1 17.408-22.755555H538.548148a18.014815 18.014815 0 0 1 17.408 22.755555l-9.178074 33.829926a18.090667 18.090667 0 0 1-17.483852 13.312z" fill="#393A54" p-id="26273" /><path d="M417.450667 647.054222l-58.74726 42.477037s-173.738667 56.244148-204.458666 100.996741S123.259259 1024 123.259259 1024h297.263408c-43.273481-278.641778-3.072-376.945778-3.072-376.945778z" fill="#404863" p-id="26274" /><path d="M421.850074 641.85837s45.511111 58.140444 91.022222 74.410667l-35.65037 10.126222-18.962963 85.295408-95.269926-81.237334 30.871704-81.237333z" fill="#F3F9FE" p-id="26275" /><path d="M411.799704 635.183407L345.581037 678.874074a6.485333 6.485333 0 0 0-2.768593 3.792593l-42.780444 133.840592 59.278222 18.394074L295.822222 881.929481 318.577778 1024h118.935703c-6.068148-52.186074-30.340741-273.825185-15.17037-382.14163a6.826667 6.826667 0 0 0-10.543407-6.674963z" fill="#373952" p-id="26276" /><path d="M666.81363 689.531259l-58.74726-42.477037s40.201481 98.304-3.072 376.945778h297.263408s-0.227556-188.757333-30.985482-233.472-204.458667-100.996741-204.458666-100.996741z" fill="#404863" p-id="26277" /><path d="M605.563259 641.85837s-45.511111 58.140444-90.832592 74.410667l35.65037 10.126222 18.962963 85.295408 95.04237-81.237334-30.871703-81.237333z" fill="#F3F9FE" p-id="26278" /><path d="M723.588741 816.507259l-42.780445-134.144a6.485333 6.485333 0 0 0-2.768592-3.792592l-66.218667-43.538963a6.826667 6.826667 0 0 0-10.543407 6.674963c14.866963 108.316444-9.291852 329.955556-15.170371 382.141629h118.935704l22.755556-142.070518-63.336297-47.028148z" fill="#373952" p-id="26279" /></svg>-->
      </div>
    </el-popover>
  </div>
</template>

<script>
export default {
  name: 'DkPosterViewAvatar',
  props: {
    item: {
      default: () => {
        return {}
      },
      type: Object
    },
    edit: {
      default: false, type: Boolean
    }
  },
  data() {
    return {}
  },
  computed: {
    _style() {
      var css = this.item.css
      return {
        backgroundColor: '#d1c3a8',
        // borderColor: css.borderColor,
        // borderStyle: 'solid',
        overflow: 'hidden',
        height: '100%',
        // borderWidth: css.borderWidth + 'px',
        borderRadius: css.borderRadius + 'px'
      }
    }
  },
  mounted() {
  },
  methods: {}
}
</script>

<style scoped lang="scss">

</style>
